在 parent 的 setState 之后重新渲染 child

Question

所以我的应用程序中有一个 Stage，每个应用程序都包含不同的数据集。

我想做的是，如果我改变我的阶段，我的 child 组件会刷新来自该阶段的数据。

我的 App.jsx 组件中每个页面的顶部都有这个阶段选择。这个阶段通过 Redux

由 state 处理

....
changeStage: function (stageId) {
    this.props.setStage(this.getStageById(stageId));
},
....
var mapDispatchToProps = function (dispatch) {
return {
       setStage: function (data) { dispatch(stageService.setStage(data)); }
    }
};
module.exports = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(App);

现在在我的次要（child - 但深入）组件中，我有以下内容：

shouldComponentUpdate: function (nextprops, nextstate) {
    console.log("stage id in this component: " + this.state.stageId);
    console.log("stage id in nextstate: " + nextstate.stageId);
    console.log("stage id from the redux store: "+ this.props.stage.id)

    return true;
},
....
var mapStateToProps = function (state) {
    return {
        stage: state.stage
    };
}

但 nextstate 不包含更新的阶段，而是包含前一阶段，这是有道理的。 state.stageId 也包含前面的 - 也仍然有意义。但是this.props.stage.id我希望包含新选定的阶段，但它没有。

它实际上包含 前一个 阶段，这意味着它在状态更新之前或正在更新状态时被调用。

所以不管怎样，我的问题是，如何才能选择 new 阶段？我不想将阶段 object 传递给我所有的 children，因为那样会使它不再可读，而且在我看来会很草率。有人知道吗？

Answer 1

您只需使用 nextprops.stage.id 而不是 this.props.stage.id 即可将 nextprops 传递给您的组件。

在 parent 的 setState 之后重新渲染 child

Rerender child after parent's setState

reactjs

redux

react-redux