フェッチ要求でファンクションレベルの変数を更新する

Question

私はフェッチとreact.jsと基本的にjavascriptを新しくしました。テーブルに新しい行を作成しようとしています。その後、ドメイン内の温度が変化しているが、私は

handleAddRow({ newRowIndex }) { 
     var temp = null; 

     /////////////////////////////////////// updating records in db 
     fetch(`${config.serverUrl}/criteriaAPI`, 
     { 
      method: "POST", 
      dataType: 'json', 
      headers: { 
        'Accept': 'application/json; charset=UTF-8', 
        'Content-Type': 'application/json; charset=UTF-8' 
       } 
     }) 
     .then(function(res){ return res.json(); }) 
     .then(function(data){ temp = data._id ;alert(temp)}) 
     ////////////////////////////////////// 
     console.log(temp); 
     const newRow = { 
      _id: temp, 
      criteria_id: '', 
      securityCriteria: '', 
      description: '', 
     }; 
     let rows = this.state.rows.slice(); 
     rows = update(rows, {$push: [newRow]}); 
    }, 



console.log(temp) = > null 
alert(temp) = > id key : id value 

Answer 1

、問題はフェッチ要求があまりにも多くの時間を取っているので、私はあなたが必要との約束

addRow(){ 
     return fetch(`${config.serverUrl}/criteriaAPI`, 
     { 
      method: "POST", 
      dataType: 'json', 
      headers: { 
        'Accept': 'application/json; charset=UTF-8', 
        'Content-Type': 'application/json; charset=UTF-8', 
       } 
     }) 
      .then(response => { 
       return response.json() 
      }) 
      .catch(err => { 
       console.log("fetch error" + err); 
      }); 

    }, 


    handleAddRow({ newRowIndex }) { 
     this.addRow() 
      .then(data => { 
       let row = this.createSingleRow(data); 
       console.log(row); 
       let rows = this.state.rows.slice(); 
       rows = update(rows, {$push: row}); 
       console.log(rows); 
       this.setState({ rows }); 
      }); 
    }, 

    createSingleRow(data) { 
     console.log('Entered into createRows'); 
     let temp = []; 
     temp.push({ 
       _id: data._id, 
       criteria_id: data.criteria_id, 
       securityCriteria: data.securityCriteria, 
       description: data.description 
      }); 

     //console.log(temp); 
     return temp; 
    }, 

Answer 2

それが問題のように見える変数関数レベルとして定義されるが、それ外に変えるあなたが完了する前の約束を待たずにconsole.log(temp)を呼び出しているということではありませんその、つまり実行は、一時変数に値を割り当てる時点まではまだ来ていません。したがって、一時変数の値は変更されますが、console.log(temp)が実行されてからしばらく時間がかかります。

一時変数を使用する場合は、非同期の方法で入力します。対応するthenハンドラでアクセスする必要があります。単一の関数にフェッチ要求を分離することによって解決