反应更新对象数组的单个对象 - 映射与整个数组

Question

我有一个包含本地状态对象数组的组件：

    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% 确定我可以使用地图找到它的情况：

选项 4

  const handleUpdate = () => {
    setState(prevState => ({
      myState: prevState.myState.map(el => el.id === id ? { ...el, description } : el)
    }))
  }

什么是recommended/best修行？选项 1（完全数组复制）是否比使用 map 更快？

Answer 1

选项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比更新数组更可取。

Here's sandbox 比较选项 1 和 2

反应更新对象数组的单个对象 - 映射与整个数组

React updating single object of an array of objects - map vs entire array

arrays

state

typescript

reactjs