直接更新 useState 对象键？ [复制]

Posted 2023-02-21

【中文标题】直接更新 useState 对象键？ [复制]

【英文标题】：Update useState Object Key Directly? [duplicate]

【发布时间】：2020-04-07 01:29:18

【问题描述】：

我想将 comment 的键值更新为新值，同时保持其他键不变。我知道我可能需要扩展运算符......但我不确定确切的语法。我需要在 setResource() 中添加什么来完成此操作？

const VideoPage = () => 
  const [state, setResource] = useState(
    
      video: 'placeholder'
      loading: 'placeholder'
      comment: 'placeholder'
    
  )
  const funct = () => 
    setResource()
  

【参考方案1】：

如果你想保留状态的其他部分，你应该这样做：

setResource(prevState => (
    ...prevState,
    comment: "new Value",
))

由于您的状态的 setter 函数不会像旧的 setState 方法那样合并其他值。这就是为什么你应该做一个functional update。

【讨论】：

一开始没有注意到你的链接。我会读一读。

@devserkan 如果我想更新两个值 1) 视频和 2) 评论，那么我是否也需要为视频编写两次相同的代码？

@cakephp，您可以使用相同的代码更新video。只需添加属性和新值。

【参考方案2】：

按原样传播您的对象，然后更新您所需的值。

const VideoPage = () => 
  const [state, setResource] = useState(
    
      video: 'placeholder'
      loading: 'placeholder'
      comment: 'placeholder'
    
  )
  const funct = () => 
    setResource(...state, comment:'Hello')
  

【讨论】：

我不太确定直接传播当前状态是否正确。归根结底，我们正在使用当前状态并使用新值对其进行更新。使用功能更新可能是一个更好的主意。