componentWillReceiveProps не вызывается после редукционной отправки

Question

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

Контейнер:

...
class ContainerClass extends Component<Props, State> {
    ...
    componentWillReceiveProps(nextProps: Object) {
        console.log('WILL RECEIVE PROPS:', nextProps);
    }
    ...
    render() {
        const { data } = this.props;
        return <SubComponent data={data} />
    }
}

const mapStateToProps = (state) => ({
    data: state.data
};

export default connect(mapStateToProps)(ContainerClass);

Редуктор:

...
export default function reducer(state = initalState, action) => {
    switch(action.type) {
        case getType(actions.actionOne):
            console.log('SETTING THE STATE');
            return { ...state, data: action.payload };
        ...
    ...
...

В другом случайном компоненте я отправляю вызов с действием actionOne, которое, как я подтверждаю, распечатывает соответствующий файл console.log.Однако console.log в componentWillReceiveProps в контейнере не печатается.

Компонент, отправляющий вызов, является модальным, появившимся над контейнером, и автоматически закрывается после отправки вызова и состоянияобновлено.Странно то, что, хотя Контейнер не обновляется немедленно, если я перехожу на другую страницу и затем возвращаюсь на страницу Контейнера, состояние фактически обновляется.

РЕДАКТИРОВАТЬ: Исходное состояние:

const initialState: Store = {
    data: []
}

И способ, которым я отправляю, находится в другом компоненте, который вызывается как новый модал (использующий реагирующую-навигацию) из Контейнера:

fnc() {
    ...
    setData(data.concat(newDatum));
    ...
}

Где setData и data - это избыточное диспетчерское действие и часть хранилища, соответственно передаваемая на реквизиты из Контейнера (который имеет setData и data через mapStateToProps, показанные выше, и mapDispatchToProps, которые я не показывал).

Answer 1

Я решил свою проблему, обновив ответную версию от v0.56 до v0.57.По-видимому, была проблема с правильной работой response-redux v6 в реактивной среде v0.56.

Answer 2

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

store.subscribe( ()=> {
  var updatedStoreState = store.getState();
})

Answer 3

Я полагаю, что getDerivedStateForProps решит вашу проблему.

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.data !== prevState.data) {
    //Do something
  } else {
    //Do something else
  }
}

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

Кроме того, некоторая информацияиз документации, которую вы могли бы рассмотреть перед использованием этого метода:

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

2. Этот метод существует для редких случаев использования, когда состояние зависит от изменений реквизита с течением времени.

3. Если вам необходимо выполнить побочный эффект (например, выборку данных или анимацию) в ответ на изменение реквизита, используйте вместо этого жизненный цикл componentDidUpdate.

Вы можете прочитать больше на: https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Answer 4

Если вы используете последнюю версию React, componentWillReceiveProps фактически устарела :

Использование этого метода жизненного цикла часто приводит к ошибкам и несоответствиям

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