React Todo List调用setAllTasks后console.log无法立即获取最新状态问题

React 中useState的状态更新为异步批量处理逻辑，调用setAllTasks后，当前handleSubmit函数闭包中绑定的allTasks仍然是本次渲染周期对应的旧状态，因此立刻打印只能拿到更新前的值，状态更新会触发组件重渲染，重渲染后才能拿到最新的allTasks值。

• 若要查看更新后的状态，可将console.log(allTasks)放在组件顶层，每次组件重渲染时都会输出最新的状态值
• 若需要在状态更新完成后执行依赖新状态的逻辑，可通过useEffect监听allTasks变化实现：

import { useState, useEffect } from 'react'

// 组件其他逻辑保持不变
useEffect(() => {
  // 此处的allTasks为更新后的最新值
  console.log(allTasks)
}, [allTasks])

你当前生成任务id的方式为allTasks.length + 1，如果后续需要实现任务删除功能，会出现id重复的问题，可替换为id: Date.now()避免id冲突。

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