setStateを呼び出したり、componentWillUpdateをReactで実行したりせずにコンポーネントをレンダリングする方法は？

Question

だから、私は2を持って言わせては、以下のようにコンポーネントに反応：

var Parent = React.createClass({ 
    getInitialState: function(){ 
     return ({ 
     child: <Children state="someState" />  
     });  
    }, 

    parentFunction: function() { 
    this.setState({ 
     child: <Children state="otherState" /> 
    }); 
    }, 

    render: function() { 
     return (
       <div> 
       {this.state.child}     
       </div> 
    ); 
    } 

    //...other methods 
}); 

var Children = React.createClass({ 
    componentWillMount: function() { 
     this.getData(); 
    }, 

    componentWillUpdate: function() { 
     this.getData(); 
    } 

    getData: function() { 
     var that = this; 

     $.getJSON("https://some.url", function(result){ 
      //Do something with result   

      that.setState(); 
     }); 


    } 

    //other methods .... 

}); 

親が最初にレンダリングされるときに、子供があまりにも初めてレンダリングされます。したがって、ChildrenのcomponentWillMountが実行され、子のgetDataが呼び出されます。 getDataは非同期関数であるgetJSONを呼び出すため、最初にレンダリングされるChildrenの結果を「オンタイム」に戻すことはできません。したがって、私の解決策は、getJSONの結果が終了した後にsetState（）を呼び出して、Childrenが再びレンダリングするようにすることです。これまでのところすべてが大丈夫です。

しかし、子を更新するparentFunctionを呼び出すと問題が発生します。 Childrenは更新されるので、そのcomponentWillUpdateが実行されるため、getData（）が呼び出されます。しかし、getData（）はsetState（）を呼び出し、結果の処理が終わった後にそれを呼び出します。 setState（）は、componentWillUpdateを実行させます。そしてそれが私が無限ループに入る方法です。

私は、setStateを呼び出さずに、またはcomponentWillUpdateを実行することなくコンポーネントをレンダリングする方法を発見しました。しかし私はそれをまだ見つけていない。 この問題を解決する方法がわかりません。どんな助けもありがとう。

Answer 1

setStateを呼び出さずにレンダリングする方法を見つける必要はありません。

ループを回避するには、React documentationに記載されているように、componentWillUpdateの代わりにcomponentWillReceiveProps（）を使用します。

コンポーネントは本当に、次のいずれかのようパターンを用いて、を更新する必要がある場合は、あなたもテストをできます。あなたも間違って親の状態を使用している、私によると

var Children = React.createClass({ 
    componentWillMount: function() { 
     this.getData(); 
    }, 

    componentWillReceiveProps: function(nextProps) { 
     // some sort of logic that defines if new 
     // props are different than the previous ones 
     if(nextProps.data !== this.props.data) 
     { 
      this.getData(); 
     } 
    } 

    getData: function() { 
     var that = this; 

     $.getJSON("https://some.url", function(result){ 
      //Do something with result   

      that.setState(); 
     }); 
    } 
} 

方法。

状態には、コンポーネント自体に関するデータと属性が含まれていて、他のコンポーネントには含まれていない必要があります。

このようにそれを書き換えることが有用だろう。これは助け

var Parent = React.createClass({ 
    getInitialState: function(){ 
     return ({ 
     something: [] // example 
     });  
    }, 

    parentFunction: function() { 
    this.setState({ 
     something: [12] // example 
    }); 
    }, 

    render: function() { 
     return (
       <div> 
        <Children state={this.state.something} /> 
       </div> 
    ); 
    } 

    //...other methods 
}); 

ホープ。