javascript - 使用 react 钩子(Hook)不可变地更新对象数组中的属性

Question

我正在尝试使用 react 钩子(Hook)更新对象数组中的数组属性，因为我们都知道，当我们需要根据以前的状态更新状态时，我们使用函数 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 的 react 系统只有在我调用 setMenuList() 时才有效。我试过了，但是除了我想不可变地更新特定对象之外它不起作用，所以我需要使用这样的函数语法:

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

另外，我没有设法让它工作，对不起，伙计们，我是长期使用基于类的组件的老专家之一，你知道 state={}等等全新的钩子(Hook)概念对我来说是新的。
因此，任何帮助将不胜感激，并提前感谢您。

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
      })
    )
  );
};