React Typescript中useState钩子如何正确使用prevState

报错根因 #

你声明的chart状态类型为ChartInterface[]数组，setChart更新回调的入参prevState就是当前最新的chart数组本身，数组原型不存在set方法，因此触发类型错误。你混淆了setChart更新函数的使用逻辑，错误的将状态更新能力当做了prevState的自带方法。

prevState的正确使用方式 #

useState的更新函数支持两种传参形式：

• 直接传新状态值：适用于新状态和旧状态无关联的场景

// 直接将chart替换为Data7Day
cb: () => { setChart(Data7Day) }

• 传入回调函数：回调的第一个参数就是当前最新的旧状态，你需要在回调中返回新的状态值完成更新，适用于新状态依赖旧状态的场景：

// 示例：合并旧状态和新的Data7Day数据
cb: () => { 
  setChart(prevState => [...prevState, ...Data7Day]) 
}

// 示例：修改旧状态中指定项的属性
cb: () => {
  setChart(prevState => {
    return prevState.map(item => item.id === 1 ? {...item, disabled: false} : item)
  })
}

该场景是否需要使用prevState #

• 如果你要直接把chart整体替换为Data7Day，不需要依赖原有chart的内容，完全没必要用prevState，直接传值更新即可，写法更简洁。
• 如果你更新时需要基于原有chart的内容做计算（比如合并数据、过滤数据、修改指定项等），必须使用prevState，可以保证拿到的是最新的旧状态，避免闭包导致的状态更新异常。

内容的提问来源于stack exchange，提问作者Sole