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

Posted 2023-02-22

【中文标题】我们如何在反应中部分更新状态？

【英文标题】：How do we partially update a state in react?

【发布时间】：2017-08-11 10:16:35

【问题描述】：

我想知道在 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 字典重置为姓氏：新值。有没有办法有效地做到这一点？

【参考方案1】：

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

扩展运算符

喜欢

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

或

获取当前状态的名字并重新应用它：

像这样

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

我不太确定第一个，但我认为第二个应该可以。

【讨论】：

传播算子应该先走。您的代码将用原始代码覆盖 newValue。

感谢您的回复！是的，我已经完成了第二个解决方案并且它有效。只是不确定这是否是要走的路。但是，是的，这也有效！

@MartinMazzaDawson 感谢您的提醒

@DebojitKaushik 可能要记住第一个，因为如果您要在 formData 中有更多要保留的变量，第一个在保留所有变量方面会简单得多而不是把每一个都写出来。

为什么你不确定第一个？你有什么想法？

【参考方案2】：

发生的情况很正常，因为您重新分配了整个 forData。

如果您想在现有表单数据中添加一些内容，请执行类似操作（还有很多其他解决方案 ^^）

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