React中对象数组中对象属性的更新问题
React中对象数组中对象属性的更新问题
提问于 2021-11-29 10:52:43
我正在做一个ecommrece项目，在搜索栏中我显示带有来自API的类别的复选框，默认情况下，所有这些都具有value active == true。我就是这样绘制它们的：
{categories.map((category) => {
return (
<>
<input type="checkbox" onClick={() => handleCheckbox(category)}
defaultChecked={category.active} key={category.name} />
<label style={{marginLeft:"5px"}} htmlFor={category.name}>{category.name}</label><br/>
</>
)
})}然后运行此函数将category.active属性从true更改为false，当单击确切的复选框时，我希望使用useState更新该对象。
const handleCheckbox = (category) => {
let tempCategory = category
if (tempCategory.active == true) {
tempCategory.active = false;
} else {
tempCategory.active = true;
}
setCategories({...categories, [tempCategory.id]: tempCategory})
console.log(category.active)
}不幸的是，当我点击复选框时，我从React中得到了一个错误：
TypeError: categories.map is not a function它指向categories.map，我不知道如何修复它。我只想更新categories数组中的特定对象。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-29 11:01:07
我相信您的类别作为一个类别对象的数组开始生命，并且您打算将setCategories设置为一个数组--而是将其设置为一个对象。
你也需要确保你没有加倍的tempCategory。就像这样：
setCategories([
...categories.filter(x => x.id != tempCategory.id),
tempCategory
]);然而，这将重新排序您的类别，将tempCategory放在末尾，因此另一个选项是正确地分割数组。
const tmpIdx = categories.findIndex(x => x.id == tempCategory.id);
setCategories([
...categories.slice(0,tmpIdx),
tempCategory,
...categories.slice(tmpIdx+1),
]);另一种选择是使categories成为一个对象并使用Object.values(categories).map(...)，但这使得排序您的类别变得更加困难，因为没有像数组那样固定的对象键/值排序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70153411
复制相关文章
相似问题
腾讯云开发者
