微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在对象和数组上使用 React 的状态更新器函数中的先前状态

如何解决在对象和数组上使用 React 的状态更新器函数中的先前状态

React 向状态设置函数传递一个带有包含先前状态的参数的回调,所以我知道在更新依赖于从先前状态设置调用更新的状态的状态属性时,您可能应该使用先前的状态(由于闭包和 React 批处理异步状态更新),这对于计数器或切换器之类的东西是有意义的,但我很好奇在更改对象和数组中保存的更复杂状态时始终使用以前的状态是否是最佳实践?

例如,如果我有一个名为 userProfile 的状态对象,它存储电子邮件和一些其他属性,我不会费心在下面的示例中明确列出,但让我们想象一下诸如 id 和 name 之类的东西,让我们也假设我正在使用 useState 钩子,但我的问题也适用于类组件状态(我知道使用钩子通常最好将每个属性分开到不同的 useState 初始化变量中,但是我更关心更新对象,这在某些情况下是不可避免的,例如使用类或使用对象数组时),如果我尝试始终使用以前的状态,我想更新电子邮件字段。 ..:

setUserProfile(prevstate => {
  return {
    ...prevstate,email: 'dummy@dumb.com'
  }
})

...或者只是这样做可以吗?:

setUserProfile({
  ...userProfile,email: 'dummy@dumb.com'
})

数组的情况有什么不同吗?例如,如果我有一个 users 的状态数组:

setUsers(prevstate => [...prevstate,newUser])

// OR

setUsers([...users,newUser])

在我个人使用过的大多数情况下,不使用对象和数组的先前状态似乎工作得很好,但同时又不像我正在对同一部分进行重复/快速的状态设置调用状态,所以也许异步批处理问题甚至没有机会抬头?在更新对象和数组时始终坚持使用以前的状态是否更安全?谢谢!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。