Question

为简要说明，我有两个组件，其内容应在窗口调整大小时进行更新。在每个窗口调整大小时，我们对新的URL进行一个history.replace（），然后对旧的URL进行一个history.push（），以便真实模拟URL的更改。我创建了三种不同的情况。

功能组件：道具（来自全局状态）在每次调整大小和更改网址后始终可用
类组件（在渲染中）：道具（来自全局状态）在每次调整大小和更改网址后，也可以在渲染方法中使用
类组件（在componentDidMount中的）：首次渲染后和更改URL后，道具（来自全局状态）不再可用。

第三个场景是我特别关注的问题。我需要一种在安装后始终更新类组件的方法。就像上述两个情况一样。

我正在努力使真正引起这种行为的原因全神贯注。

我编写了一个示例沙箱代码来产生自己的经验。

https://codesandbox.io/s/233yq699yr

Answer 1

您已经使用props将Redux状态映射到mapStateToProps，因此不需要使用state在组件的本地componentDidMount中设置它。只需在您的this.props.dim方法中使用render：

{this.props.dim.mobi} => {this.props.dim.editButtonBottom}

我希望能够在每次安装后更改组件中的值。我不想一直依赖于全局状态的值。

如果您希望能够显示基于props的值，但可以选择用state覆盖该值，则可以执行以下操作：

returnStyleBottom = () => {
    return this.state.style.bottom || this.props.dim.editButtonBottom;
}

render() {
    return (
        ...
        <p>
            Bad (now nice): {this.state.dim.mobi} => {this.returnStyleBottom()}
        </p>
    );
}

我已使用以下代码更新了您的沙箱，因此您可以对其进行测试：https://codesandbox.io/s/lrryn9nl09

默认情况下，您将this.state.style.bottom设置为0，因此将使用this.props.dim.editButtonBottom的值。如果更新this.state.style.bottom，则它将成为显示的值。而且，如果您想返回使用props中的值，只需将state的值重新设置为0。

Answer 2

通过添加componentDidUpdate并比较道具来解决问题。

尽管不建议这样做，因为仅在极少数情况下才应使用这样的东西，但这似乎是唯一可以产生我想要的结果的东西！

https://codesandbox.io/s/233yq699yr

带有路由器的React-Redux不更新componentDidMount中的状态

2 个答案: