时间戳

首页 > 解决方案 > 如何将键值对添加到处于功能组件状态的对象中

javascript - 如何将键值对添加到处于功能组件状态的对象中

问题描述

我已经看到了一些关于类组件的计算属性名称的东西，功能组件是否有类似的解决方案？

我的初始状态为 {}。

const [choice, setChoice] = useState({})

当一个按钮点击时，我想动态地添加一个新的 k:v 。

onClick={()=>{ 
setChoice( props.choice[Key]=[Val] );
}

这似乎不起作用...

我希望添加到选择变量中，如下所示： {"key":"val","key1":"val1",etc..)

我也试过这个：

class Choice {
    constructor(key, value){
      this.key = key,
      this.value = value
    }
  }

但不确定如何为它调整 onClick。

标签： javascriptreactjsnext.js

解决方案

问题来自choiceonClick 函数中的访问器。好的语法应该是（因为选项可以直接作为组件中的变量访问）

onClick={()=>{ 
setChoice( { ...choice, key:val } ); 
}

  1. choice是状态变量，因此可以通过其名称直接访问。无需使用 props.choice 链接到您的组件道具

  2. setChoice 应该将原始变量以及新的键/值对作为参数。因此 ...choice 的解构和添加的成员变量 key:value。

编辑：如果您希望您的更新使用 React 方式更合理，您应该使用回调语法。最后你会有

setChoice(choice => { return {...choice, key:val}})

这防止了一些闲聊，来自 React 中状态更新的异步性质。

推荐阅读