React-Redux与Router没有更新componentDidMount中的状态

Question

简要说明一下，我有两个组件，内容应该在窗口调整大小时更新。在每个窗口调整大小时，我们将history.replace（）添加到新的url，将history.push（）返回到旧的url，以便真正模拟url的更改。我创造了三种不同的情境。

1. 功能组件：每次调整大小和更改网址后，都可以使用道具（来自全局状态）
2. 类组件（在渲染中）：每个调整大小和网址更改后，渲染方法中也提供道具（来自全局状态）
3. 类Component（在componentDidMount中）：Props（来自全局状态）在第一次渲染后和URL更改后不再可用。

第三种情况是我特别关注的。我需要一种方法来在安装后始终更新类组件。就像上面两个发生的那样。

我试图绕过真正导致这种行为的原因。

我编写了一个样本沙箱代码来生成我正在经历的内容。

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

Answer 1

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

即使这不是推荐的，因为这样的事情应该只在极少数情况下使用，这是唯一似乎产生我想要的结果！

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

Answer 2

您已经使用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即可。