在 useState 更新期间动态访问 JavaScript 对象属性答案

【问题标题】：Accessing JavaScript Object property dynamically during useState update在 useState 更新期间动态访问 JavaScript 对象属性
【发布时间】：2022-01-04 18:09:49
【问题描述】：

我有这样定义的 useState 变量

 const [queryBuilder, setQueryBuilder] = useState({location: [], metric: [], datetime: [], statistics: []})

然后我有一个函数应该能够将单个属性设置回空数组 []。例如，在这里我遇到了问题，我尝试了几种方法，但都没有奏效。

const clearCategory = (e, category) => {
    setQueryBuilder(prev => { return {...prev, prev[category]: []}})
}

这不起作用，但我尝试通过以前的对象和括号表示法访问属性（我也尝试过点表示法）。

通常我可以像这样动态访问

queryBuilder[category]

但是在 useState 钩子期间我不能，我该如何完成这个？

还有，写作

setQueryBuilder(prev => {return {...prev, category: []}})

将创建一个名为 category 的新属性，其中包含一个空数组

【问题讨论】：

{ ...prev, [category]: [] }
@Lennholm 谢谢！外卖然后是 ...prev 我已经在访问该对象，所以我可以直接放置括号和变量。如果您愿意从您的评论中做出回答，我会接受它
好的，答案已发布

标签： javascript reactjs react-hooks

【解决方案1】：

您应该在这里使用computed property name，这是 ECMAScript 2015 中引入的一个功能。对于您的示例，它将如下所示：

{ ...prev, [category]: [] }

请注意，计算属性本身并不引用您的 prev 对象，并且在技术上与它无关。它只是对象的唯一成员，它会覆盖 prev 对象中的任何同名属性，因为它是在 prev 传播到对象中之后定义的。

【讨论】：