レンダリング中の状態更新状態でエラーが発生する

Question

私は反応するのが初めてで、onChangeアクションが発生するたびに親コンポーネントの状態を子から更新しようとしています。 onchangeアクションは、文字が入力されると、入力された値でsearchInputValの状態を更新する入力ボックスから発生します。私は、次のプロパティを持つ親<App/>コンポーネントを持っており、ここに述べて：

updateSampleFilteredState(filteredSamples) { 
    this.setState({ 
     samples: filteredSamples 
    }); 
}, 
getInitialState() { 
    return { 
     samples:allSamples, 
     searchInputVal:"" 

}} 

が、私はプロパティを渡すと、ここで子コンポーネントにダウン状態：私はライン this.updateNewSampleState(filteredSamples);子コンポーネントを追加する前に

updateNewSampleState(filteredSamples){ 
    return (
     this.props.updateSampleFilteredState(filteredSamples) 
     ) 
} 
render() { 
    const filteredSamples = this.props.samples.filter(sample => { 
     return sample.sampleFamily.toLowerCase().indexOf(this.props.searchInputVal.toLowerCase()) !== -1; 
    }); 
    this.updateNewSampleState(filteredSamples); 
    return <div className="samples-container-inner-styling"> 
    { 
    filteredSamples.map((sample) => { 
    return (... 

フィルタリングはうまくレンダリングされますが、明らかにサンプルの状態を新しいフィルタリングされた状態に更新しません。私が行this.updateNewSampleState(filteredSamples);が新しい状態を設定するためにコンポーネント内の関数を実行するとき、私は最終的に私のアプリケーションがクラッシュする再発するエラーのリストを取得します。エラーはアンチパターンについて何か言います。状態を更新するにはどうすればいいのか分かりません。

Answer 1

レンダリング関数から状態を更新してはいけません。それは、それが悪い方法である理由に直面しています。 setStateを呼び出すたびにコンポーネントが再レンダリングされるので、レンダリング関数の内部で呼び出すと、再び呼び出されます。それで、なぜその関数を呼び出しているのですか？私はあなたが入力に使用しているonChange関数でそれを行うことができると思います。

Answer 2

@Césarですでに述べたように、状態を設定するとコンポーネントの再レンダリングが行われるため、レンダラで状態を設定することは意味がありません。したがって、基本的に無限レンダーループのようなものが得られます。

あなただけの小道具からfilteredSamplesを計算していることを考えると、あなたはconstructorにその状態を計算することができます：

コンストラクタは状態を初期化するための適切な場所です。

コンストラクタで小道具から状態を導出する際ただし、次の点に注意してください

あなたが何をやっている知っていれば、小道具に基づいて状態を初期化しても大丈夫です。 [...]

このパターンは、効果的に小道具を「フォーク」し、バグにつながる可能性があるため注意してください。州に小道具を同期させる代わりに、lift the state upにしたいことがよくあります。

州のためにプロンプ​​トを使用して「フォーク」する場合は、componentWillReceiveProps(nextProps)を実装して、状態を最新の状態に保つこともできます。しかし、状態を上げることはしばしば簡単で、バグが発生しにくくなります。