関数へのクリック時に行/セルデータを送信する - ReactJS

Question

componentWillMountからテーブルデータを取得してUIとして表示しています。私は行/セルがクリックされたときにfuctionをトリガし、その値を別のPHPに返すので、取得したセルの値を使ってバックエンドに問い合わせることができます。

• = 0,1,2,3（I 4列を有する）
• 行インデックス=各指標についてのデータ。

this.state.testTimeがhandleClick関数に正しい値を送信していない理由はわかりません。誰にもこれに関する入力はありますか？ありがとう。

_handleClick: function (event) { 
     this.setState({testTime: event.target.value}); 
     console.log(event.target.value);  
     var data = { 
      testTime: this.state.testTime 
     } 

     console.log("clicked"); 
     $.ajax({ 
      type: "GET", 
      crossDomain: true, 
      url: "http://localhost:8080/TEST/capture.php", 
      data: data, 
      success: function(data){ 
       alert(data); 
      }, 
      error:function(data) 
      { 
       alert("Data sending failed"); 
      } 
     }); 
    }, 

return (
<tbody> 
{tableData.map((row, index) => { 
     return (
       <tr key={"row_" + index} > 
       {row.map((cell, index) => { 
        return (
         <td key={"cell_" + index} onClick={this._handleClick} value={this.state.testTime} >{cell}</td> 
         ); 
       })} 
       </tr> 
      ); 
    })} 
</tbody> 
) 

Answer 1

setState非同期関数であり、一度setState実行される第二引数が完了し、コンポーネントが再レンダリングされるように、コールバックを受け付けます。したがって、data変数に直接event.target.valueを使用するか、コードをコールバックに入れる必要があります。

this.setState({testTime: event.target.value} ,() => { 
    var data = {testTime: this.state.testTime} 
    ... 
    $.ajax... 
});