我有一個包含本地狀態物件陣列的組件：
const [myState, setState] = useState<SomeObjectType[]>([]);
我可以通過復制整個陣列來更新該陣列中的單個物件，然后更新我希望更新的單個物件的屬性：
選項1
const state = [...myState];
state[id].description = description;
setState(state);
或者我可以使用地圖：
選項 2
const newState = talkingPoints.map(el => {
// ??? if id equals, update description property
if (el.id === id) {
return {...el, description};
}
// ??? otherwise return as is
return el;
});
setData(newState);
或者我可以這樣做（因為我 100% 確定 id 存在于陣列中）？
選項 3
const handleUpdate = () => {
setState(prevState => ({
...prevState,
prevState[id].description = description
}))
}
對于我不是 100% 確定我可以使用 map 并找到它的情況：
選項 4
const handleUpdate = () => {
setState(prevState => ({
myState: prevState.myState.map(el => el.id === id ? { ...el, description } : el)
}))
}
什么是推薦/最佳實踐？選項 1（完全陣列復制）是否比使用 map 更快？
uj5u.com熱心網友回復：
選項 3 和選項 4 不正確，prevState/myState 是一個陣列并且您正在回傳一個物件，這肯定會導致打字稿出錯。至于選項 1 和 2，它們僅在宣告式和命令式編程方式之間有所不同。宣告式編程使代碼更具可讀性。
關于選項 1：
const newState = [...myState];
newState[index].description = "new desc";
// Access index position as opposed to id
// since the item's position may not align with it's id
setState(newState );
在帶有函式的選項 2 上map，它可以寫成如下：
setState(myState.map(item => item.id === id ? {...item, item.description: "new desc"} : item))
總之，使用 map/filter 比更新陣列更可取。
這是比較選項 1 和 2的沙盒
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/476044.html