在 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 没有立即更新，但如果我导航到不同的页面，然后返回 Container 页面，状态实际上已经更新了。

编辑：初始状态是：

const initialState: Store = {
    data: []
}

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

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

setData 和 data 分别是 redux dispatch action 和 store 的一部分，它们分别是从 Container （通过上面显示的 mapStateToProps 有 setData 和 data 以及 mapDispatchToProps 传入的）我没有显示）。

Answer 1

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

Answer 2

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

使用这种生命周期方法通常会导致错误和不一致

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

Answer 3

我认为更重要的是在改变 redux 的状态后获取价值，而不是在哪个生命周期中获取价值。因此，为了获取值，您可以在 componentDidMount 中使用 redux 的 subscribe 方法

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

Answer 4

我相信 getDerivedStateForProps 会解决你的问题。

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

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

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

1. getDerivedStateFromProps 在调用渲染方法之前调用，无论是在初始挂载时还是在后续更新时。

2. 此方法适用于状态取决于道具随时间变化的罕见用例。

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

您可以阅读更多内容：https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops