React待办列表新增updateTask后报tadoState.filter is not a function求助

你遇到的报错核心是updateTask方法错误修改了tadoState的数据类型：

• 初始化的tadoState是数组类型，因此可以调用filter方法统计未完成任务
• 你在修改完单个任务的内容后，调用setTadostate时传入了单个任务对象updatedTask，直接把原本是数组的tadoState覆盖为对象类型，对象本身没有filter方法，自然就抛出了对应报错。
  你之前以为updateTask和handleToggler逻辑一致，实际二者的区别就在于：handleToggler最后给setTadostate传的是修改后的完整数组newTadoState，而updateTask传的是单个任务对象。
  你排查时打印状态看起来符合预期，是因为React的状态更新是异步的，你打印的是更新前的数组状态，等状态实际更新为对象后才触发了报错。

修改App.js中的updateTask方法，给setTadostate传入修改后的完整数组即可：

// Update Existing Task
const updateTask = (id, value) => {
  const newTadoState = [...tadoState]
  const updatedTask = newTadoState.find(tado => tado.id === id)
  updatedTask.name = value
  // 传入修改后的完整数组，不要传入单个任务对象
  setTadostate(newTadoState)
}

如果要避免状态更新的闭包问题，更稳妥的写法是使用函数式更新：

const updateTask = (id, value) => {
  setTadostate(prevState => {
    const newState = [...prevState]
    const targetTask = newState.find(tado => tado.id === id)
    targetTask.name = value
    return newState
  })
}

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