Question

我正在将Flaact与Flask服务器一起使用，并且有一个用户可以输入信息的表。当用户编辑单元格，添加新行，删除行等时，此子表会更新MainApp的tableData状态。

我的问题是我在MainApp中使用image状态来存储图像URL（此URL包含哈希值，因此每次客户端请求信息时它都会更改）。但是，我还使用MainApp中的tableData状态来存储在用户更新表时更改的表信息。这会调用componentWillUpdate，然后获取图像blob，将其转换为URL并更新状态image。这反过来会调用componentWillUpdate，因为您可能会想到导致递归调用。 React documentation表示不在setState内拨打componentWillUpdate。我很好奇推荐的做法是什么。

我的预期行为是用户编辑表格上的单元格，MainApp使用表格信息向服务器发送请求，MainApp接收图像并相应地更新页面。我不应该使用image州来存储网址吗？

执行此操作的一种方法是在setState中使用componentWillUpdate并使用shouldComponentUpdate基于globalVariable的逻辑（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。这不会在代码中创建递归。

如何使用React来设置setState并避免递归？

1 个答案: