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

Question

I'm using React with a Flask server, and have a table where a user can enter information. This child table updates the tableData state of the MainApp when the user edits a cell, adds a new row, deletes a row etc.

My problem is that I'm using an image state in the MainApp to store the image URL (this URL contains the hash as well so it changes every time a client requests for information). However, I'm also using the tableData state in the MainApp to store the table information which changes when a user updates the table. This calls componentWillUpdate which in turn gets the image blob, converts it to a URL and updates the state image . This in turn calls componentWillUpdate as you might imagine leading to a recursive call. The React documentation says to not call setState inside componentWillUpdate . I'm curious as to what the recommended way of doing this is.

My intended behaviour is that the user edits a cell on the table, MainApp sends a request to the server with the table information, MainApp receives an image and updates the page accordingly. Should I not use image state to store the URL?

One way to do this is to use setState in componentWillUpdate and use shouldComponentUpdate with logic based on a globalVariable ( shouldComponentUpdate would be called multiple times) but I'm pretty sure that is probably not the recommended approach.

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

You can identify the changed property in componentWillReceiveProps and then call setState accordingly. This will not create recursion in the code.