ReactJsコールバックから変数を取得しようとしています

Question

私はちょうど作成されたオブジェクトを返すPOST APIを持っています。reactjsにオブジェクト情報を取得したいと思います。

createItem(item){ 
    let temp; 
    // POST to DB 
    fetch(url(this.props.api), { 
     method:"POST", 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
     body: JSON.stringify({ 
      name: item, 
      isCompleted:false 
     }) 
    }).then(function (response) { 
     return response.json() 
    }).then(function (body) { 
     temp = body; // got the objects information 
     console.log(temp); 
    }); 

    console.log(temp); 

    this.state.bucket_list.push({ 
     name: item, 
     isCompleted: false 
    }); 
    this.setState({bucket_list: this.state.bucket_list}); 

} 

これは私が持っているものですが、私はthen関数の外のデータを抽出することができます。私がsetStateとしたい情報を得た後、新しく作成したオブジェクトをstate: bucketlistに追加します。しかし、私はJavascriptの非同期の問題のために、私は正しい順序でこれを行うことができないと思う。何か案は？

Answer 1

あなたに答えを与える前に、状態を直接変えることは反パターンとみなされるべきです。代わりにオブジェクトを不変であると考えるべきです。

の代わりに：

1.：とにかく

this.state.bucket_list.push({ 
    name: item, 
    isCompleted: false 
}); 
this.setState({bucket_list: this.state.bucket_list}); 

あなたがやるべき

this.setState({ 
    bucket_list: [ 
    ...this.state.bucket_list, 
    { 
     name: item, 
     isCompleted: false 
    }, 
    ] 
}); 

---

、私はあなたのユースケースを処理するには、2つの異なるwaytsを与えてみましょう非同期/待機（推奨）

async/awaitを使用すると、指示を待って次の指示に進むことができます。使用

async createItem(item){ 
     // POST to DB 
     const data = await fetch(url(this.props.api), { 
     method:"POST", 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
     body: JSON.stringify({ 
      name: item, 
      isCompleted:false 
     }) 
     }); 

     this.setState({ 
     bucket_list: [ 
      ...this.state.bucket_list, 
      data, 
     ], 
     }); 
    } 

2.キープはthenをフェッチし、それが機能は、独自のthisを持っていないことを可能にする矢印機能

を使用しています。そのため、arrow functionの中にthis.setStateを使用することができます。

createItem(item){ 
     // POST to DB 
     fetch(url(this.props.api), { 
     method:"POST", 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
     body: JSON.stringify({ 
      name: item, 
      isCompleted:false 
     }) 
     }) 
     .then(response => response.json()) 
     .then(data => { 
     this.setState({ 
      bucket_list: [ 
      ...this.state.bucket_list, 
      data, 
      ], 
     }); 
     }); 
    } 

注2：ユースケースがシンプルな場合は、この方法をそのまま使用できます。それ以外の場合は、間違いなく見てくださいredux