Как обновить состояние компонента реакции на основе реквизита

Как я могу заставить реагирующий компонент обновлять состояние при изменении реквизита?

Я использовал метод:

componentWillReceiveProps(nextProps){
    this.setState({key:nextProps}); 
    console.log(this.state);
  }

Консоль показывает мне, что nextProps является определенным значением, но this.state.key остается неопределенным.

Спасибо!


reactjs javascript state react-props react-state-management
person JSX    schedule 13.06.2018    source источник
comment
Что вы пытаетесь достичь? Если вы получаете состояние из реквизита, может быть лучше выполнять эти вычисления в render вместо обновления состояния.   -  person Tholle    schedule 13.06.2018
comment
Я работаю над приложением с двумя основными компонентами. Первый отправляет запрос ajax onlick, а затем передает эту информацию второму компоненту через реквизиты. Мне нужно, чтобы второй компонент обновлялся при изменении реквизита.   -  person JSX    schedule 13.06.2018
comment
Компонент @JSX обновляется при изменении реквизита. Для этого вам не нужно добавлять его в состояние.   -  person Hriday Modi    schedule 13.06.2018

Ответы (1)


arrow_upward
2
arrow_downward

В журнале консоли this.state отображается undefined, поскольку setState является асинхронным. Следовательно, когда вы выполняете setState, он не обновляет состояние немедленно, и поэтому журнал консоли не показывает обновленное состояние.

Вы должны сделать следующее:

componentWillReceiveProps(nextProps){
    this.setState({key:nextProps}, () => {
        console.log(this.state);
    }); 
 }

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

person Hriday Modi    schedule 13.06.2018
comment
Только компонентWillReceiveProps для справки был рекомендован как небезопасный не так давно: reactjs .org/docs/react-component.html#the-component-lifecycle - person tehawtness; 07.12.2018