在 React 中更新对象数组中的对象属性的问题

Question

我正在制作一个 ecommrece 项目，在搜索栏中，我正在显示带有 API 类别的复选框，默认情况下，所有这些都具有值 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 数组中的特定对象。

Answer 1

我相信您的类别从类别对象数组开始，您的本意是将 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(...)，但这会使您的类别更难排序，因为对象键/值没有像数组那样的固定顺序。