使用react钩子不可变地更新对象数组中的属性

Question

我正在尝试使用react钩子更新对象数组中的数组属性，因为我们都知道当我们需要根据以前的状态更新状态时，我们使用函数set"MypopertyName"如下所示:

我的代码:

const [MenuList, setMenuList] = useState([
{
id: 0,
title: "sushi",
desc: "finest fish and vegies",
price: "$22.99",
amount: 1,
},
{
id: 1,
title: "shneitzel",
desc: "a german specialty",
price: "$50.99",
amount: 1,
},
{
id: 2,
title: "pizza",
desc: "an italian specialty",
price: "$100.99",
amount: 1,
},
{
id: 3,
title: "pasta",
desc: "an italian specialty",
price: "$200.99",
amount: 1,
},
]);

我的问题是我想根据用户的点击量来改变餐量所以这就是我所尝试的:

const onClickHandler = (id) => {
for (const key in MenuList) {
if (MenuList.id === id) {
return (MenuList[key].amount = MenuList[key].amount + 1);
}
}
};

我知道react的反应系统只在我调用setMenuList()时起作用我试过了但它不起作用除了我想要不变地更新特定对象所以我需要使用函数语法像这样:

setMenuList((prevMenuList)=>{
//my code
})

同样，我没有设法让它工作，对不起，伙计们，我是一个使用基于类的组件很长时间的老大师之一，你知道的，state={}等等，全新的钩子概念对我来说是新的。

因此，任何帮助都将不胜感激，并提前感谢您。

Answer 1

基于函数的setter的使用

setMenuList((prevMenuList)=>{

是有用的，当函数可能被调用时，当前menuList在其作用域中不是当前正在渲染的-例如，当函数在API调用结束后被调用时。这与React不改变状态的需求完全不同，后者需要完全另一种方法。

映射状态数组，当ID匹配时，返回一个数量递增的新对象。

const onClickHandler = (id) => {
setMenuList(
menuList.map(
obj => obj.id !== id ? obj : ({
...obj,
amount: obj.amount + 1
})
)
);
};