在 React 中是否有 setState() 的简写方式？答案

【问题标题】：Is there a shorthand way to setState() in React?在 React 中是否有 setState() 的简写方式？
【发布时间】：2016-06-27 18:32:00
【问题描述】：

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

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});

必须有更有效的方法来做到这一点。有没有一种简写的方法可以以一种对反应安全的方式仅更改我的状态对象的一个属性？

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

实际上，您不必指定所有值。只有您想为其赋予新价值的那个。

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

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

第一个参数可以是一个对象（包含零个或多个要更新的键）或返回包含要更新的键的对象的函数（状态和道具）。

【讨论】：

请注意，这只适用于顶级状态。您将无法对任何嵌套状态执行此操作。
非常感谢！只是出于好奇，除了“Facebook 不喜欢它”之外，为什么不使用 this.state.name = newValue ？编辑：我只是通过向下滚动文档中的 20 行来回答这个问题！感谢您的原始答案。
@EllDoubleYew 因为您的更改很容易丢失。 React 为您执行的内部组件状态管理以及向您公开的所有组件生命周期方法与直接的外部值设置不能很好地配合。这也是 React 与不可变数据结构并驾齐驱的原因之一，也是 Flux 架构如此完美地融入大局的原因之一（无论是 Flux、Redux 还是它的任何其他实现）。

【解决方案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",
}

【讨论】：