1

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

私の問題はimage、画像の URL を格納するために MainApp の状態を使用していることです (この URL にはハッシュも含まれているため、クライアントが情報を要求するたびに変更されます)。ただし、tableDataユーザーがテーブルを更新すると変更されるテーブル情報を保存するために、MainApp の状態も使用しています。これはcomponentWillUpdate、イメージ blob を取得し、それを URL に変換して state を更新する呼び出しを行いますimage。componentWillUpdateこれは、再帰呼び出しにつながると想像できるように、順番に呼び出します。Reactのドキュメントには、 setStateinsideを呼び出さないと記載されていますcomponentWillUpdate。これを行うための推奨される方法が何であるかについて興味があります。

私の意図した動作は、ユーザーがテーブルのセルを編集し、MainApp がテーブル情報と共にサーバーに要求を送信し、MainApp が画像を受け取り、それに応じてページを更新することです。imageURL を保存するために状態を使用すべきではありませんか?

これを行う 1 つの方法は、globalVariable (複数回呼び出される) に基づいたロジックで使用および使用するsetStateことcomponentWillUpdateですが、これはおそらく推奨されるアプローチではないと確信しています。shouldComponentUpdateshouldComponentUpdate

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>
           );
      }
    })
4

1 に答える 1

0

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

于 2017-06-01T06:12:06.130 に答える