在 React useState 中更新嵌套 object 中的值

Question

我有這個useState：

const [data, setData] = useState([
  {
    id: 1,
    options: [{ id: 1, amount: 0 }, { id: 2, amount: 0 }]
  },
  {
    id: 2,
    options: [{ id: 1, amount: 0 }, { id: 2, amount: 0 }]
  }
]);

所以我需要一個 function 從項目 X 更新選項 X。

像這樣：

const increase = (itemId, optionId) => {
   //setData(...) 
}

我試着做這樣的事情：

const increase = (itemId, optionId) => {
    const copy = [...data];

    const dataItem = copy.find((item) => item.id === itemId);
    const option = dataItem.options.find((item) => item.id === optionId);

    option.amount = option.amount + 1;
    setData(copy);
}

但它增加了兩個...

Answer 1

嘗試這個

setData((prevArr) => {
  return prevArr.map((item) => {

  if (item.id !== itemId) return item;

  const updOptions = item.options.map((opt) => (
     opt.id === optionId ? {
        ...option,
        amount: option.amount+1,
      } : option
   )
   return {
    ...item,
    options: updOptions,
  }
  })
})