web-dev-qa-db-ja.com

Reactjsでシンプルなプロミスを実装しようとしています

Reactで初めてPromiseを試すだけです。私は（他の誰かのコードから取り込んだ）機能する基本的な約束を持っていますが、それを役に立つように適応させる方法がわかりません。

これまでのところ（render()関数内）

_  var promise = new Promise( (resolve, reject) => {

     let name = 'Dave'

     if (name === 'Dave') {
        resolve("Promise resolved successfully");
     }
     else {
        reject(Error("Promise rejected"));
     }
  });

  promise.then(function(result) {
     console.log(result); // "Promise resolved successfully"
  }, err => {
     console.log(err); // Error: "Promise rejected"
  });
_

案の定、promise条件が一致するため（_name === 'Dave'_）、コンソールは_Promise resolved successfully_をログに記録します。

ただし、promiseを使用するときに変数に値を割り当てる方法がわかりません。例えば：

_  promise.then(function(result) {
     var newName = 'Bob'
  }, function(err) {
     var newName = 'Anonymous'
  });
_

次に、この値をrender()のreturnステートメントで返そうとすると、次のようになります。

_<h2>{newName}</h2>
_

それはnewNameが未定義であると言います。

私も試しました：

_  promise.then(function(result) {
     var newName = result
  }, function(err) {
     var newName = error
  });
_

...これを期待すると、resolveまたはerror文字列がnewName変数に割り当てられますが、そうではありません。

私はこれを間違った方法で考えていますか？条件が満たされたときに文字列をログに記録するだけでなく、これをどのように役立つようにできますか？

これは本当に私の頭を痛めているので、どんな助けもいただければ幸いです...

更新

_ render() {

      var promise = new Promise( (resolve, reject) => {

         let name = 'Paul'

         if (name === 'Paul') {
            resolve("Promise resolved successfully");
         }
         else {
            reject(Error("Promise rejected"));
         }
      });

      let obj = {newName: ''};

      promise.then( result => {
         obj["newName"] = result
      }, function(error) {
         obj["newName"] = error
      });

      console.log(obj.newName)

    return (
      <div className="App">
         <h1>Hello World</h1>
         <h2>{obj.newName}</h2>
      </div>
    );
  }
_
javascriptreactjsasynchronouspromise
7
Paulos3000

Reactを間違った方法で使用しています。 Promiseは、後で結果を返すように設計されています。約束がresolvedまたはrejectedになるまでに、renderは実行を完了し、約束が完了しても更新されません。

renderメソッドは、必要な出力をレンダリングするためにpropsやstateにのみ依存する必要があります。 propまたはstateを変更すると、re-renderコンポーネント。

  • 最初に、Promiseがコンポーネントのライフサイクルのどこに行くべきかを特定します（ ここ ）

  • あなたの場合、私は次のことをします

    • コンストラクター（ES6）内またはgetInitialStateを介して状態を初期化します

      constructor(props) {
  super(props);
  this.state = {
    name: '',
  };
}

    • 次に、あなたに合ったcomponentWillMountまたはcomponentDidMountで、そこで約束を呼び出します

      componentWillMount() {
 var promise = new Promise( (resolve, reject) => {

  let name = 'Paul'

  if (name === 'Paul') {
   resolve("Promise resolved successfully");
  }
  else {
   reject(Error("Promise rejected"));
  }
 });

 let obj = {newName: ''};

 promise.then( result => {
  this.setState({name: result});
 }, function(error) {
  this.setState({name: error});
 });
}

    • 次に、renderメソッドに次のようなものを書き込みます。

      render() {
 return (
  <div className="App">
   <h1>Hello World</h1>
   <h2>{this.state.name}</h2>
  </div>
 );
}
12
Panther

現在のスコープについて考える必要があります。promise.thenに渡す関数にいるときは、新しいブロックスコープにいるため、関数で作成したvarは存在しません。その範囲外です。 Reactコンポーネントを定義する方法がわかりませんが、コンポーネントにnewName変数があると仮定すると、スコープの問題を解決する方法が2つあります-バインドおよび矢印関数：

promise.then(function(result) {
  this.newName = result; //or what you want to assign it to
}.bind(this))

{this.newName}を使用して参照できます

または、矢印機能を使用します：

promise.then((result) => {
  this.newName = result; //or what you want to assign it to
}.bind(this))

JavaScriptのthisキーワードを理解するのに役立つ このエッグヘッドビデオ をご覧になることをお勧めします。

1
Ian Mundy