我们如何部分更新状态？

Question

我想知道在React / React-Native中部分更新组件状态的最佳方法是什么。除了我可以创建一个函数，它接受当前状态并创建一个新状态并合并新的{key：value}和之前的状态。例如：

{
      dataStream:[//having data here], 
      formData: {
         'first_name': 'Richard',
         'last_name' : 'Barbieri',
      } 
}

我想将last_name更新为另一个值。我打电话的时候 this.setState(formData:{{'last_name':newValue}})，它将formData字典重置为姓氏：new Value。有效地解决这个问题吗？

Answer 1

我认为你可以尝试两件事：

1. 传播运营商：

this.setState({formData: {...this.state.formData, "last_name" : newValue } });

或

1. 获取当前状态的first_name并重新应用它：

this.setState({ formData: { "first_name": this.state.formData.first_name, "last_name" : newValue } })

我对第一个不太确定，但我认为第二个应该有效。

Answer 2

正常情况是正常的，因为你重新分配整个forData。

如果你想在现有的表单数据中添加一些东西，那就做那样的事情（还有很多其他解决方案^^）

this.setState({
    formData: Object.assign(this.state.formData, { 'last_name': newValue } 
})