web-dev-qa-db-ja.com

React replacecomponentWillReceiveProps

子コンポーネントに次のメソッドがあり、プロップ変更の状態を更新して正常に機能する

  componentWillReceiveProps(nextProps) {
    // update original states
    this.setState({
      fields: nextProps.fields,
      containerClass: nextProps.containerClass
    });
  }

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code.

そして私は更新しようとしますが、今まで何の成功もありませんでした

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.fields !== prevState.fields) {
      return { fields: nextProps.fields };
    }
  }

  componentDidUpdate(nextProps) {
    console.log(nextProps);
    this.setState({
      fields: nextProps.fields,
      containerClass: nextProps.containerClass
    });
  }

無限ループに入るからです。

新しい小道具に基づいて私の状態を適切に更新するにはどうすればよいですか

reactjsupdatesdeprecatedprop
1
fefe

コンポーネントが更新されるたびに新しい状態を設定するため、ループが発生します。したがって、状態が更新された場合、それはコンポーネントの更新を意味し、それを再度更新します。そのため、状態変更時にコンポーネントを更新しないようにする必要があります。

componentDidUpdate(prevProps, nextProps) {
  if(prevProps !== this.props){
   console.log(nextProps);
   this.setState({
     fields: nextProps.fields,
     containerClass: nextProps.containerClass
   });
 }
}
2
Shotiko Topchishvili

次の呼び出しをトリガーする状態を設定し、再度呼び出す呼び出しを更新します。最初に値が変化しているかどうかを確認してから、状態を設定する必要があります。

componentDidUpdate(nextProps) {
    console.log(nextProps);
    if (nextProps.fields !== this.state.nextProps.fields){
        this.setState({
           fields: nextProps.fields,
           containerClass: nextProps.containerClass
        });
    }
  }

フックの使用をお勧めします ここを参照 。

2
M.M.J

私は以前何度もそこに着きました。あなたがしなければならないことは、_this.setState({.._をいくつかの条件付きでラップすることだけです。

あなたはcomponentDidUpdate(prevProps, prevState, snapshot)を持っているので、_nextProps.fields_や_nextProps.containerClass_が_this.props.fields_や_this.props.containerClass_と異なるかどうかを比較し、それから状態を設定します

ところで、CDMではnextPropsは実際にはprevPropsです

0
Danko