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上的模式，在调度呼叫并更新状态后将自动关闭。奇怪的是，尽管没有立即更新容器，但是如果我导航到另一个页面然后返回到容器页面，则实际上状态是更新的。

编辑：初始状态为：

const initialState: Store = {
    data: []
}

我分派的方式是在另一个组件中，该组件被称为来自Container的新模式（使用react-native-navigation）：

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

其中setData和data分别是redux派发操作和从容器（具有setData和data通过上面显示的mapStateToProps和我未显示的mapDispatchToProps）。

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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。。在初始安装和后续更新上，都在调用render方法之前立即调用getDerivedStateFromProps。

2。。这种方法适用于少数情况，即状态取决于道具随时间的变化。

3。。如果您需要因道具更改而产生副作用（例如，数据获取或动画），请改用componentDidUpdate生命周期。

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

redux派发后未调用componentWillReceiveProps

4 个答案: