Обновление состояния компонента с помощью реквизита

Question

Я пытаюсь обновить состояние некоторых компонентов, используя полученные реквизиты, следующим образом:

componentWillReceiveProps(nextProps) {
   if(nextProps.history.length <= 2) {
      this.setState({
         history: nextProps.history
      });
   }
}

Проблема в том, что, когда родитель передает историю с длиной больше 2, состояние все еще мутирует,Есть идеи?

Спасибо

Answer 1

Вы можете использовать componentDidUpdate() метод жизненного цикла или статический getDerivedStateFromProps() метод.

static getDerivedStateFromProps(props, state) {
    return ({
        history: props.history.length <= 2 ? props.history : state.history
    })
}

Или, если вы предпочитаете:

componentDidUpdate(prevProps) {
    const { history } = this.props;
    if((prevProps.history !== history) && history.length <= 2) {
        this.setState({ history })
    }
}

Answer 2

Метод жизненного цикла componentWillReceiveProps устарел.Вы должны использовать getDerivedStateFromProps

getDerivedStateFromProps вызывается непосредственно перед вызовом метода рендеринга как при первоначальном монтировании, так и при последующих обновлениях.Он должен возвращать объект для обновления состояния или null для обновления ничего.