javascript - 使用 Redux 作为初始组件状态

Question

我使用 Redux 作为组件中的初始状态，用于编辑当前所选项目的名称(包含这些属性:“名称”和“所选”)。它用作本地初始状态，因为我只想在单击保存按钮(我尚未实现)时更新 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 更新)就会丢失？但我该如何解决这个问题呢？

Answer 1

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

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

请注意:使用 prop 更新状态被视为反模式。