反應：附加到狀態數組對象的數組

Question

我的狀態看起來像這樣：

const [state, setState] = useState([
 { id: uuidv4(), myList: ["listItem1", "listItem2"] }
 { id: uuidv4(), myList: ["listItem1"] }
])

如何將myList的值添加到我想要添加的特定對象？

Answer 1

首先，由於您需要計算 uuid 以生成 id，我將使用一個函數來初始化狀態：

const [state, setState] = useState(() => [
 { id: uuidv4(), myList: ["listItem1", "listItem2"] }
 { id: uuidv4(), myList: ["listItem1"] }
])

然后，要將項目添加到myList數組，我建議您添加如下函數：

function addItem(id, item) {
  const newState = state.map(el => 
      el.id === id ? {...el, myList: [...el.myList, item]} : el
  );
  setState(newState);
}