使用 Redux 作为初始组件状态答案

【问题标题】：Use Redux as an initial component state使用 Redux 作为初始组件状态
【发布时间】：2017-12-18 14:13:36
【问题描述】：

我在一个组件中使用 Redux 作为初始状态，用于编辑当前选定项的名称（包含这些属性：“名称”和“选定”）。它被用作本地 initial 状态，因为我只想在单击保存按钮时更新 Redux 全局状态（我还没有实现）。

constructor(props) {
    super(props)
    this.state = {
        item: this.props.item
    }
}

我的渲染函数包含一个编辑名称输入：

<TextField
    id={"name"}
    value={this.state.item.name}
    onChange={e => this.updateName(e.target.value)}
/>

updateName() 函数是：

updateName = (value) => {
    var newItem = this.state.item
    newItem.name = value
    this.setState({item: newItem})
}

在这里，我可以选择一个项目，输入的默认值会随着我选择的项目的名称而变化（当我选择一个项目时，Redux的状态会更新，组件的状态和文本也会更新在输入中）。一切都按预期进行。

当我写入输入时，写入的文本会发生变化，但选择项目的动作不会再更新输入的文本（它应该遵循 Redux 中所选项目的名称，就像我输入文本之前一样） .

是不是因为当我使用 this.setState() 更新组件状态时，对 this.props.item 的引用（以及之后的 Redux 更新）丢失了？但是我该如何解决这个问题呢？

【问题讨论】：

【解决方案1】：

请记住，constructor 仅被调用一次，而您的输入是受控组件，由您的状态控制。

您需要做的是根据 redux 状态更新您的组件状态，因此，在 componentWillReceiveProps 方法中对此进行更新。

请注意：使用道具更新状态被视为反模式。

【讨论】：