Состояние реакции перезаписывается на пустое в componentDidUpdate после того, как ему было присвоено значение

Question

Я пишу компонент регистрации и устанавливаю ошибку в componentDidUpdate на основе ответа от сервера, использующего Redux, но при отправке состояние позже устанавливается пустым через несколько секунд, то есть сразу после того, как сообщение об ошибке было установлено в состояние, он снова был пуст

Answer 1

Я думаю, что лучшее место для обработки таких ситуаций и предотвращения повторного рендеринга / бесконечных циклов - это обрабатывать его в getDerivedStateFromProps методе react жизненного цикла.

state = {
    firstName: "",
    lastName: "",
    email: "",
    password: ""
    msg: null,
    prevPropMsg: null // we don't need this state, we can re-use msg state if you are not mutating msg state apart from in getDerivedStateFromProps method
};  

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.error !== prevState.prevPropMsg) {
        // check for register error
        if (nextProps.error.id === "REGISTER_FAIL") {
            return { 
               msg: nextProps.error.msg.message,
               prevPropMsg: nextProps.error.msg.message
            };
        } else {
            return { 
               msg: null,
               prevPropMsg: null
            };
        }
    }

    return null;
}

render() {
    console.log(this.state)
}

Answer 2

Ваш компонент будет немедленно перерисован при вызове setState с componentDidUpdate. Это было бы хорошо, если бы вы не звонили setState в вашем else состоянии. Я полагаю, что происходит то, что вы устанавливаете ошибку, ваш компонент повторно рендерится, и ваше else состояние сбрасывает сообщение. Проверьте это, проверив вывод:

componentDidUpdate(prevProps) { 
  const { error } = this.props;
  if (error !== prevProps.error) {
    // check for register error
    if (error.id === "REGISTER_FAIL") {
      this.setState({ msg: error.msg.message });
      console.log('if');
    } else {
      this.setState({ msg: null });
      console.log('else');
    }
  }
}

, если оба стреляют. Это подтвердит вашу проблему.

Из документов :

Вы можете немедленно вызвать setState () в componentDidUpdate (), но обратите внимание, что он должен быть заключен вусловие, как в примере выше, или вы будете вызывать бесконечный цикл. Это также вызвало бы дополнительный повторный рендеринг, который, хотя и невидим для пользователя, может повлиять на производительность компонента. Если вы пытаетесь «отразить» какое-либо состояние для опоры, идущей сверху, рассмотрите возможность использования опоры напрямую. Подробнее о , почему копирование реквизита в состояние приводит к ошибкам .