React setState无法向对象数组添加新对象问题排查

• 新任务对象构造错误：传入的text是字符串类型时，直接写...text会把字符串拆成单字符索引的键值对，不会生成预期的text字段，新任务结构不符合预期，后续拖拽逻辑按id查询时就容易出现异常。
• 状态读取时机错误：React状态更新是异步批处理的，调用setTasks之后立刻打印外层的tasks，拿到的永远是当前渲染闭包里的旧状态，不代表更新没执行。你在set函数回调里打印出4条完整数组，才是更新时的正确入参。
• React DnD拖拽逻辑命中闭包陷阱：拖拽相关的回调函数如果没有正确声明tasks作为依赖，会一直捕获组件初次渲染时的初始任务数组，根本读不到后续新增的任务项，按id查询时自然返回undefined。

• 修正新任务对象的构造逻辑，显式声明text字段，不要直接展开字符串类型的入参
• 不要在setState调用后同步读取状态值，需要获取最新状态时，通过useEffect监听状态变化拿到最新值
• 所有拖拽相关的回调、配置项，必须把用到的tasks状态加入依赖数组，避免捕获到陈旧的闭包值；查询任务时增加非空判断，避免直接操作undefined报错

修复后的核心代码如下：

import { useState, useEffect } from 'react'
import { v4 as uuidv4 } from 'uuid'

function App() {
  const [tasks, setTasks] = useState([
    {
      id: uuidv4(),
      text: 'Meeting at place',
      specify: 'todo',
    },
    {
      id: uuidv4(),
      text: 'Shopping',
      specify: 'inprogress',
    },
    {
      id: uuidv4(),
      text: 'Appointment',
      specify: 'complete',
    },
  ])

  // 添加任务
  const newTask = (text) => {
    const id = uuidv4();
    const specify = 'todo'
    // 修正：显式赋值text字段，避免错误展开字符串
    const makeTask = { id, text, specify }
    // 函数式更新保证基于最新状态追加，避免并发更新时状态被覆盖
    setTasks(prevTasks => [...prevTasks, makeTask])
  }

  // 正确读取最新状态的方式：useEffect监听状态变化
  useEffect(() => {
    console.log('最新任务列表：', tasks)
  }, [tasks])

  // 拖拽逻辑注意：所有用到tasks的回调，必须将tasks加入对应hook的依赖数组
  // 按id查找任务时先做存在性判断，避免读取undefined属性报错
}

通用排查提示：遇到状态更新后读取值不对的问题，优先排查是否在同步上下文中读取了异步更新的状态，以及相关回调是否命中了React闭包陷阱。涉及第三方拖拽库这类需要注册回调的场景，一定要保证回调执行时能拿到最新的状态值。

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