Question

我的子组件中具有以下方法，可以在道具更改时更新状态，效果很好

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

因为我陷入了无限循环。

如何基于新道具正确更新状态

Answer 1

之所以会循环，是因为每次组件更新时都会设置新状态。因此，如果状态更新，则意味着组件更新，然后您再次对其进行更新。因此，您需要防止在状态更改时更新组件。

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

Answer 2

您设置状态，它将触发另一个呼叫并进行更新，从而再次呼叫，依此类推。您必须先检查该值是否在更改，然后再设置状态。

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

我建议您使用钩子see here。

Answer 3

我以前到过那里很多次。.您要做的就是将this.setState({..包装在某种条件下。

您有componentDidUpdate(prevProps, prevState, snapshot)，因此只需比较nextProps.fields和/或nextProps.containerClass是否不同于this.props.fields和this.props.containerClass-然后设置State

顺便说一句，在CDM nextProps中实际上是prevProps

React替换componentWillReceiveProps

3 个答案: