在 React 中有 shorthand setState() 方法吗？

Question

假设我像这样初始化组件的状态：

getInitialState: function(){
   return {name: "Bob Smith",
           phone: "555-555-5555",
           location: "San Francisco, CA",
           best-friend: "Bill Jacobson",
           favorite-color: "Orange"}
},

然后，如果我只想修改其中一个状态，我被告知以下是禁忌：

this.state.name = "John Smith";

但我应该使用：

this.setState({name: "John Smith",
               phone: this.state.phone,
               location: this.state.location,
               best-friend: this.state.best-friend,
               favorite-color: this.state.favorite-color});

一定有更有效的方法来做到这一点。有没有一种 shorthand 方法可以安全地改变我的状态对象中的一个属性？

Answer 1

实际上，您不必指定所有值。只有您想要为其设置新值的那个。

setState 只会向您的状态添加（或随后覆盖）值。它不会重新创建整个对象。

您可以找到相关文档here。 Facebook 开发人员也考虑了您在此处提出的完全相同的问题，并且在幕后他们保留了旧值，我在这里引用：

The first argument can be an object (containing zero or more keys to update) or a function (of state and props) that returns an object containing keys to update.

Answer 2

是的，它内置于 React 中！正如 Elod 所说，您只需指定要更改的状态。该州的其余部分将保持不变。

getInitialState: function() {
  return {
    name: "Bob Smith",
    phone: "555-555-5555",
    location: "San Francisco, CA",
  }
}

// Somewhere else...
this.setState({
  name: "John Smith",
})

this.state 现在是

{
  name: "John Smith",
  phone: "555-555-5555",
  location: "San Francisco, CA",
}

在 React 中有 shorthand setState() 方法吗？

Is there a shorthand way to setState() in React?

jsx

reactjs