[英]updating a property in an array of object immutably using react hooks
我正在尝试使用 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);
}
}
};
我知道只有当我调用setMenuList()
时,react 的反应系统才起作用,我试过了,但它不起作用,除了我想不变地更新特定对象,所以我需要使用这样的函数语法:
setMenuList((prevMenuList)=>{
//my code
})
另外,我没有设法让它工作,对不起,我是使用基于类的组件很长时间的老大师之一,你知道state={}
等等整个新的钩子概念是对我来说是新的。
因此,任何帮助将不胜感激,并提前感谢您。
基于函数的setter的使用
setMenuList((prevMenuList)=>{
当当前在其作用域中的menuList
不是当前正在呈现的内容时可以调用该函数时很有用 - 例如,在 API 调用完成后调用该函数时。 这与 React 需要不改变状态完全不同,后者需要完全另一种方法。
映射状态数组,当ID匹配时,返回一个数量递增的新对象。
const onClickHandler = (id) => {
setMenuList(
menuList.map(
obj => obj.id !== id ? obj : ({
...obj,
amount: obj.amount + 1
})
)
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.