如何使用React设置状态并避免递归？

我正在使用React和Flask服务器，并且有一个用户可以输入信息的表格。此子表更新当用户编辑单元格，添加新行，删除行等时MainApp的tableData状态。如何使用React设置状态并避免递归？

我的问题是，我在MainApp中使用image状态来存储图像URL （该URL也包含散列，因此每次客户请求信息时都会更改）。但是，我还使用MainApp中的tableData状态来存储用户更新表时更改的表信息。这称为componentWillUpdate，然后获取图像blob，将其转换为URL并更新状态image。如你所想象的那样，这又调用componentWillUpdate导致递归调用。 React documentation说componentWillUpdate内部不叫setState。我很好奇，推荐的方法是什么。

我的预期行为是用户在表格上编辑单元格，MainApp使用表格信息向服务器发送请求，MainApp接收图像并相应地更新页面。我不应该使用image状态来存储URL吗？要做到这一点

一种方法是在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> 
      ); 
     } 
    })

来源

2016-06-14 kdheepak

为什么不在'handleTableUpdate'内部进行'fetch'调用？ – FaureHu

这会工作！我只是好奇最好的反应实践。如果您有任何建议，那就太棒了。 – kdheepak

您可以识别componentWillReceiveProps中已更改的属性，然后相应地调用setState。这不会在代码中创建递归。

来源

2017-06-01 06:12:06

如何使用React设置状态并避免递归？

回答

相关问题