React提交Todo时Firebase缺最新值且生成空数组问题排查

两个异常现象（最新输入内容未写入Firebase、提交时出现空数组）来自同一个核心机制：React的状态更新是异步批处理的，setState调用不会同步修改当前执行上下文里的状态变量。
具体执行逻辑：

• 组件首次加载时，todos状态初始值为空数组[]
• 提交表单触发onSubmit时，虽然你调用了setTodos((current)=>[todo, ...current])触发更新，但当前onSubmit函数闭包里捕获的todos仍然是本次渲染周期的旧值，不会立刻变成更新后的新数组
• 后续执行Firebase写入逻辑时，读取到的todos就是闭包里的旧值：首次提交时是空数组，后续提交时是上一次渲染的todos值，永远比你实际的最新状态慢一步，所以你刚输入的内容永远不会被写到数据库里
• 你控制台打印出的空数组，就是首次渲染、第一次提交时读到的旧状态值

不要在调用setTodos后立刻读取状态值用于数据库写入，先手动构造最新的待办列表，同时用这个新值更新状态、写入数据库即可，修改后的提交逻辑代码：

const onSubmit = async(event) => {
  event.preventDefault();
  // 提前构造包含最新输入项的完整待办列表
  const updatedTodos = [todo, ...todos];
  // 更新本地状态
  setTodos(updatedTodos);
  setTodo("");
  try {
    const docRef = await addDoc(collection(db, "todos"), {
      // 写入数据库时直接使用提前构造的新列表，避免读取到旧状态
      todos: updatedTodos,
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (e) {
    console.error("Error adding document: ", e);
  }
}

额外提示：如果你有逻辑必须等状态更新完成后再执行，不要直接写在setTodos调用后面，应该放在useEffect中，通过监听todos状态变化触发执行。

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