在React中有setState()的简写方法吗?

时间:2016-06-27 18:32:01

标签: reactjs jsx

让我说我像这样初始化组件的状态:

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

必须有一种更有效的方法来做到这一点。是否有一种速记方式可以以一种安全的方式改变我的状态对象的一个​​属性?

2 个答案:

答案 0 :(得分:8)

实际上,您不必指定所有值。只有您希望获得新值的那个。

setState只会向您的州添加(或随后覆盖)值。它不会重新创建整个对象。

您可以找到相关文档here。 Facebook开发人员也想到了你在这里提出的完全相同的问题,并且他们保留了旧的价值观,我在这里引用:

  

第一个参数可以是一个对象(包含零个或多个要更新的键)或一个函数(state和props),它返回一个包含要更新的键的对象。

答案 1 :(得分:2)

是的,它内置于React中!正如埃洛德所说,你只需要指定你正在改变的状态。该州的其余部分将保持不变。

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",
}