Реагировать заменить компонентWillReceiveProps

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

, потому что я попал в бесконечность l oop.

Как правильно обновить свое состояние, основываясь на новых реквизитах

Answer 1

Вы устанавливаете состояние, которое будет запускать другой вызов, и обновление, которое будет вызывать снова и так далее. Вы должны проверить, изменяется ли значение сначала, а затем установить состояние.

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

Я рекомендовал вам использовать ловушки , см. Здесь .

Answer 2

Вы получаете l oop, потому что вы устанавливаете новое состояние при каждом обновлении компонента. Таким образом, если состояние обновляется, это означает, что компонент обновляется, и вы обновляете его снова. Из-за этого вам нужно запретить обновление компонента при изменении состояния.

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

Answer 3

Я добираюсь туда много раз раньше ... Все, что вам нужно сделать, это обернуть this.setState({.. в некоторые coditional.

У вас есть componentDidUpdate(prevProps, prevState, snapshot), поэтому просто сравните, если nextProps.fields и / или nextProps.containerClass отличаются от this.props.fields и this.props.containerClass - и только тогда установите State

Btw, в CDM nextProps на самом деле prevProps