React to setStateを使用して再帰を避けるには？

Question

私はFlaskサーバーでReactを使用しており、ユーザーが情報を入力できるテーブルを持っています。この子テーブルは、ユーザーがセルを編集したり、行を追加したり、行を削除したりすると、MainAppのtableData状態を更新します。

私の問題は、MainApp内でimage状態を使用してイメージURL （このURLにはハッシュも含まれているので、クライアントが情報を要求するたびに変更されます）。しかし、私はまた、MainAppのtableData状態を使用して、ユーザーがテーブルを更新するときに変更されるテーブル情報を格納します。これにより、componentWillUpdateが呼び出され、イメージのBLOBが取得され、URLに変換されて状態imageが更新されます。これは順番に再帰呼び出しにつながると想像するようにcomponentWillUpdateを呼び出します。 React documentationはsetStateをcomponentWillUpdateの中に呼んではいけないと言います。私はこれを行うための推奨される方法について何か興味があります。

私の意図する動作は、テーブルのセルを編集し、MainAppがテーブル情報を持つサーバーに要求を送信し、MainAppが画像を受信し、それに応じてページを更新するということです。 URLを保存するのにimage状態を使用しないでください。これを行うには

一つの方法は、componentWillUpdateでsetStateを使用して、グローバル変数に基づいてロジックとshouldComponentUpdateを使用することです（shouldComponentUpdateが複数回呼ばれます）が、私はそれはおそらく、推奨されるアプローチではないかなり確信しています。

var globalVariable = true 
var MainApp = React.createClass({ 
    shouldComponentUpdate : function() { 
    // logic here using globalVariable 
    } 
    componentWillUpdate : function() { 
     console.log("Get image from server") 
     fetch('/api/data', { 
     method: 'POST', 
     body: JSON.stringify({ 
        tableData: this.state.tableData, 
     }) 
     }) 
      .then(function(response) { 
       return response.blob(); 
      }.bind(this)) 
      .then(function(imageBlob) { 
       this.setState({ 
        image: URL.createObjectURL(imageBlob), 
        tableData: this.state.tableData 
       }) 
      }.bind(this)) 
     }, 
    handleTableUpdate : function(newState) { 
      this.setState({ 
       image: this.state.image, 
       tableData: newState 
      }); 
      console.log("Table updated") 
     }, 
    render : function() { 
     return (
      <div> 
       <div id="inverter-table" className="col-sm-6"> 
        <MyReactBootstrapTable 
          onTableUpdate={this.handleTableUpdate} 
          data={this.state.tableData} /> 
       </div>     
       <div id="img" className="col-sm-6"> 
        <MyPlot url={this.state.image}></MyPlot> 
       </div> 
      </div> 
      ); 
     } 
    }) 

Answer 1

変更されたプロパティをcomponentWillReceivePropsで識別し、それに応じてsetStateを呼び出すことができます。これはコード内で再帰を作成しません。