React TS中toDo类型无法赋值给SetStateAction<toDo[]>报错解决

编译TypeScript代码时抛出如下类型错误：

Argument of type 'toDo' is not assignable to parameter of type 'SetStateAction<toDo[]>'

对应问题代码：

const [todoList, setTodoList] = useState<toDo[]>([])

useEffect(() => {
  loadToDoList()
}, [])

const loadToDoList = async () => {
  const toDoList = await ToDoService.getToDoList()
  console.log(toDoList)

  setTodoList(toDoList)
}

return (
  <div>
    <ToDoList items={todoList} />
  </div>
)
}

你通过useState<toDo[]>明确声明了todoList状态是toDo类型的数组，对应的更新方法setTodoList仅接受toDo[]类型的入参。但TS静态检查时判定你传入的toDoList（接口返回值）是单个toDo类型对象，和要求的数组类型不匹配，因此抛出错误。
绝大多数场景下，这个错误的根源是ToDoService.getToDoList()方法的TS返回类型定义错误，被误写为返回单个toDo对象的Promise，而非toDo数组的Promise。

按优先级依次排查处理：

• 检查ToDoService.getToDoList()的类型声明，确保其返回值类型为Promise<toDo[]>，和状态定义的类型对齐：

  // 错误定义
  getToDoList(): Promise<toDo>
  // 修正后正确定义
  getToDoList(): Promise<toDo[]>
  

• 如果接口实际返回的是嵌套结构（例如数组被包裹在data/list等字段下），不要直接传入整个接口响应对象，先取出对应数组字段再调用更新方法：

  const loadToDoList = async () => {
    const res = await ToDoService.getToDoList()
    // 按接口实际返回结构取数，以下示例对应返回结构为 { list: toDo[] } 的场景
    setTodoList(res.list)
  }
  

• 如果你确认接口实际返回值是数组，仅存在TS类型推断偏差，可以先用类型断言快速验证问题：

  setTodoList(toDoList as toDo[])
  

  注意：类型断言只会跳过TS静态类型校验，无法解决运行时数据结构和预期不符的问题，优先排查前两项问题

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