我有一个组件,在本地状态下有一组对象:

    const [myState, setState] = useState<SomeObjectType[]>([]);

我可以通过复制整个数组来更新该数组中的单个对象,然后更新我希望更新的单个对象的属性:

OPTION 1


    const state = [...myState];
    state[id].description = description;
    setState(state);

或者我可以使用 map :

OPTION 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)?

OPTION 3

  const handleUpdate = () => {
    setState(prevState => ({
      ...prevState,
      prevState[id].description = description
    }))
  }

如果我不能100%确定我可以使用map并找到它:

OPTION 4

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

推荐/最佳实践是什么?

推荐答案

选项3和选项4不正确,prevState/myState是一个数组,您返回的是一个对象,这肯定会导致typescript出错.至于选项1和选项2,它们只是在go 极化和非极化编程方式之间有所不同.go 极化编程使代码更具可读性.

关于选项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 );

在具有map个功能的选项2上,它可以写为:

setState(myState.map(item => item.id === id ? {...item, item.description: "new desc"} : item))

总之,使用map/filter比更新数组更可取.

Here's sandbox比较选项1和选项2

Typescript相关问答推荐

类型脚本强制泛型类型安全

从typescript中的对象数组中获取对象的值作为类型'

如何推断计算逻辑的类型

如何在编译时为不带常量的参数引发错误

如何使默认导出与CommonJS兼容

在对象中将缺省值设置为空值

ANGLING v17 CLI默认设置为独立:延迟加载是否仍需要@NgModule进行路由?

函数重载中的不正确TS建议

为什么在leetcode问题的测试用例中,即使我确实得到了比预期更好的解决方案,这段代码也失败了?

TypeScrip:从对象中提取和处理特定类型的键

类型与泛型抽象类中的类型不可比较

Typescript .根据枚举输入参数返回不同的对象类型

递归生成常量树形 struct 的键控类型

如何将元素推入对象中的类型化数组

如何使用动态生成的键和值定义对象的形状?

如何在没有空接口的情况下实现求和类型功能?

有没有办法从不同长度的元组的联合中提取带有类型的最后一个元素?

Vue3 Typescript props 要么显示错误,要么根本不显示任何内容

Select 控件的常见 onChange 事件失败

TypeScript 泛型和函数重载