我们如何部分更新反应中的状态？

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 字典重置为姓氏：新值。有没有有效的方法？

Answer 1

我认为您可以尝试以下两种方法：

喜欢

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

或

喜欢

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

How do we partially update a state in react?