redux 调度后未调用 componentWillReceiveProps

Question

我正在构建一个反应本机应用程序并使用 redux 来处理状态。我运行遇到这样一种情况，当 redux 状态更改时，我的一个容器没有立即更新。

容器：

...
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。但是容器中componentWillReceiveProps中的console.log没有打印出来

调度调用的组件是出现在容器上方的模态，并在调度调用和更新状态后自动关闭。奇怪的是，虽然 Container 没有立即更新，但如果我导航到另一个页面然后返回 Container 页面，状态实际上已经更新了。

编辑：初始状态为：

const initialState: Store = {
    data: []
}

我的调度方式是在一个不同的组件中，该组件被称为来自 Container 的新模态（使用 react-native-navigation）：

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

其中 setData 和 data 分别是 redux dispatch action 和 store 的一部分，它们是从容器（具有 setData 和 data 通过上面显示的 mapStateToProps 和我没有显示的 mapDispatchToProps。

Answer 1

假设您使用的是最新版本的 React，componentWillReceiveProps 实际上是 deprecated:

Using this lifecycle method often leads to bugs and inconsistencies

在许多情况下，您不能真正依赖生命周期挂钩。您可能希望使用 componentDidUpdate 来查看稍微不同的方法。

Answer 2

我认为更重要的是在 redux 状态发生变化后获取价值，而不是在哪个生命周期中获取价值。所以为了获得价值，你可以在 componentDidMount

中使用 redux 的 subscribe 方法

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

Answer 3

我相信 getDerivedStateForProps 可以解决您的问题。

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

您将根据组件的状态检查 redux 的状态，然后采取相应的行动。

此外，在使用此方法之前，您可能会考虑文档中的一些信息：

1. getDerivedStateFromProps 在调用 render 方法之前调用，在初始挂载和后续更新时都是如此。

2. 这种方法适用于状态依赖于 props 随时间变化的罕见用例。

3. 如果您需要执行副作用（例如，数据获取或动画）以响应 props 的更改，请改用 componentDidUpdate 生命周期。

您可以在以下位置阅读更多信息：https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

Answer 4

我通过从 react-native v0.56 更新到 v0.57 解决了我的问题。显然 react-redux v6 在 react-native v0.56 环境下正常工作有问题。

redux 调度后未调用 componentWillReceiveProps

componentWillReceiveProps not called after redux dispatch

reactjs

react-native

redux

react-redux

react-native-navigation