Question

我在Component中定义了我的初始状态，如下所示：

constructor(props) {
    super(props);
    //this.state = {count: props.initialCount};
    this.state = {
        timeArray: [],
        metawords: '',
        description: '',
        currentTime: '',
        inputFieldsDisabled: true
    }
}

我有一个被调用的事件，我想只更新metawords属性。我认为以下代码应该可以工作，但事实并非如此。

updateInputValue1(evt) {
    const newMetawords = "abcd";
    this.setState(
        [...this.state,{
            metawords: evt.target.value
        }]
    );

思想？

Answer 1

state是一个对象，所以按照你现在的方式更新它不会起作用。

您只需更新所需的属性：

this.setState({
  metawords: evt.target.value,
})

由于您已提及spread运营商，您也可以（但并非总是必要）将您的州更新为：

this.setState({
  ...this.state,
  metawords: evt.target.value,
})

或

this.setState(prevState => ({
  ...prevState,
  metawords: evt.target.value,
}))

如果您需要更多相关信息，我建议您查看ReactJS documentation。

Answer 2

为什么不简单：

this.setState({ metawords: evt.target.value })

您不需要传递所有其他状态值，只需传递要更新的属性和新值即可。在setState期间，您不需要打扰其他状态值，React将执行合并（合并所有其他状态值和要更新的状态）。

有关详细信息，请查看DOC。

Answer 3

您可以像这样使用spread运算符来设置状态。

this.setState(
        {...this.state,
          metawords: evt.target.value
        })

但是，由于您只想更改单个属性，因此这也适用于您的情况：

this.setState({metawords: evt.target.value})

如何使用React获得扩展运算符更新状态

3 个答案: