React中如何更新列表内对象状态？setList调用后状态未更新

• 同一同步事件回调中重复调用setList导致更新被覆盖：你在执行setList([...list, newListObj])追加列表项后，紧接着调用setList({ userName: '', itemList: [] })，React对同一事件内的状态更新做批量合并，后一次调用会直接覆盖前一次的更新结果，且后一次传入的是对象类型，和list初始定义的数组类型不匹配，直接破坏了状态结构。
• 状态更新后立即打印拿不到新值：React状态更新是异步批量执行的，调用setList后立刻console.log(list)，拿到的是当前渲染闭包里缓存的旧状态值，不是更新后的结果。
• 构造的新列表项缺失字段：你定义的list子项结构包含userName和itemList，但构造newListObj时只传了id和userName，结构不完整。

调整handleSubmit逻辑，删除错误覆盖状态的代码，使用函数式更新规避闭包旧值问题，补全列表项字段：

const handleSubmit = e => {
  e.preventDefault()
  const newTask = taskItem
  // 函数式更新task，避免闭包拿到旧task值
  setTask(prevTask => [...prevTask, newTask])
        
  const newListObj= {
    id: new Date().getTime().toString(),
    userName: name,
    itemList: [] // 补全和初始结构一致的字段
  }
  // 函数式更新list，追加新项
  setList(prevList => [...prevList, newListObj])

  setIsEditing(false)
  setName('')
  // 注意：原来写的 setList({ userName: '', itemList: [] }) 是错误逻辑，直接删掉
  // 如果需要清空临时编辑的表单项，请单独声明对应的临时状态存储，不要直接覆盖list状态
}

如果需要查看更新后的list值，不要在set调用后立即打印，使用useEffect监听状态变化即可：

useEffect(() => {
  console.log('更新后的list：', list)
}, [list])

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