ReactJSの親状態から子プロップを更新する

Question

ReactJSアプリケーションをどのように異なる "ページ"または "ビュー"で構築できるかを理解しようとしています。

私は基本アプリケーションとして以下のコンポーネントを用意していますが、React状態のcurrentStateプロパティを使用して、ビューでアクティブなコンポーネントが切り替わるようにしています。

dataLoadedコールバックが発生すると、コンポーネントはジョブを実行しますが、更新されたレシピ配列を受け取ることはありません。

どのようにして、アプリケーション内の更新された状態に基づいてその小道具を更新させることができますか？

また、私はこの全体に間違った方法で近づいていますか？

Answer 1

私がお勧めしたいのは、コンストラクタ内のすべてのコンポーネントコードをレンダリング関数内にプッシュすることです。反応の美しさは、少しでもコストをかけずにすべてを完全に再レンダリングできるということです。 ReactはDOMの違いを比較するという難しい作業を行い、最小限の違いのみを再レンダリングします。

Answer 2

コンストラクタメソッドは、レシピが空であるコンポーネントがマウントされたときにのみ実行され、空の配列がappStatesに渡されます。基本的に、appStatesは決して変更されません。

Answer 3

私はあなたのaproachは本当に反応的ではないと思っています。あなたは改善できる概念を少なくとも2つ持っています。

まず、react-routerを使用して、React.jsのページ/コンポーネント間の複雑なナビゲーションを実現します。自分で実装すると、より複雑でエラーが発生しやすくなります。反応ルータを使用すると、さまざまなルートにコンポーネントを簡単に割り当てることができます。

第2に、文脈で物事を保存することはほとんどありません。this。基本的には、あなたのようなエラーにつながるからです：appStatesがまったく変わっていないことを認識していません。 Reactの状態は、あなたのアプリケーションの状態を保存するのに最適なツールです（Reduxのようなものに置き換えられる/補完されることが必要な場合があります）。

コンポーネントに表示する内容を格納する場合は、コンストラクタで初期化された状態の単純なフラグを使用して反応ルータの機能を補完する必要があります。レンダー機能。

次の例は、Reactの状態だけを使用して読み込みと読み込みの間でコンポーネントのビューを動的に変更するように指示する例を示しています。もちろん、ボタンを使用する代わりに、componentDidMountでAJAX呼び出しを行い、終了時にロードを停止するように状態を変更する、非常によく似た動作を再作成することができます。

class App extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.state = {loading: true}; 
 
     this.stopLoading = this.stopLoading.bind(this); 
 
    } 
 

 
    stopLoading() { 
 
     this.setState({ 
 
      loading: false, 
 
     }); 
 
    } 
 

 
    render() { 
 
     let view=<div><h1>loading</h1><button onClick={this.stopLoading}>FINISH</button></div>; 
 
     if(!this.state.loading){ 
 
      view=<h1>loaded</h1>; 
 
     } 
 
     return <div>{view}</div>; 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>

Answer 4

私は@Ezraチャンに同意します。私はコードが子RecipeListにアプリケーション小道具を渡すためだけの状態を利用して調整し、javascript spread functionことができると思います：「ホー​​ム」コンポーネントは、コンストラクタで定義されているので、何が起こっている私が想定し

class App extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = {currentState: 'Loading', recipes: [],'Loading': <Loading/>, 
     'Home': <RecipeList recipes={this.state.recipes} {...this.props}/>}; 
    } 

    //I assume you want to pass the props of this App component and the data from the back-end as props to RecipeList. 
    dataLoaded = (data) => { 
     this.setState({ 
      recipes: data, 
      currentState: 'Home', 
      'Loading': <Loading/>, 
      'Home': <RecipeList recipes={data} {...this.props}/> 
     }); 
    } 

    componentDidMount() { 
     // AJAX Code that retrieves recipes from server and then calls dataLoaded 
    } 

    render() { 
     return this.state[this.state.currentState]; 
    } 
}