React项目使用uniqid生成ID返回空值，求助问题原因

问题描述 #

我正在制作第一个React待办事项列表，使用uniqid生成器为待办对象生成ID，但当前设置返回的ID为空值''而非随机ID。若在handleSubmit函数外设置todo状态似乎可以正常工作，但不清楚当前写法存在什么问题，恳请指点遗漏的点。

问题代码 #

import { useState } from 'react';
import Header from './components/Header';
import List from './components/List';
import React from 'react';
import uniqid from 'uniqid';

function App() {
const [todoList, setTodoList] = useState([]);
const [todo, setTodo] = useState({
name: '',
complete: false,
id: ''
});
const [error, setError] = useState(false);

function handleChange(e) {
setTodo({
  ...todo,
    name: e.target.value,
});
}

function handleAdd(newTodo) {
setTodoList([
  ...todoList,
     newTodo
])
}

function handleSubmit(e) {
e.preventDefault();
if (!todo.name) {
  setError(true);
} else {    
  handleAdd({
    ...todo,
       id: uniqid()
  })
setError(false);
setTodo({
  ...todo,
     name: ''
})
console.log(todo);
}
}

function handleDelete(id) {
const todoListItems = todoList.filter(todo => todo.id !== id);
setTodoList(todoListItems);
}

function handleClear() {
setTodoList([]);
}

问题原因与解决办法 #

1. 误解：console.log打印的是旧状态 #

你在handleSubmit里执行console.log(todo)时，打印的是更新前的todo状态——React状态更新是异步的，不会立即修改当前变量。实际上你传给handleAdd的临时对象{...todo, id: uniqid()}已经正确生成了随机ID，并且已添加到todoList中。可以打印newTodo或查看todoList的实时状态验证这一点。

2. 修复闭包陷阱导致的状态丢失 #

当前handleAdd和handleDelete直接使用todoList变量，快速连续操作时可能因闭包引用旧状态导致数据丢失。改用函数式更新获取最新状态：

修改handleAdd：

function handleAdd(newTodo) {
  setTodoList(prevTodoList => [...prevTodoList, newTodo])
}

修改handleDelete：

function handleDelete(id) {
  setTodoList(prevTodoList => prevTodoList.filter(todo => todo.id !== id))
}

3. 优化todo状态重置逻辑 #

重置todo状态时，直接返回初始结构更清晰，无需依赖旧状态：

setTodo({ name: '', complete: false, id: '' })

4. 无需同步更新todo状态的id #

作为输入新待办的临时状态，todo的id初始为空完全合理——你只需要在创建待办项并添加到列表时生成ID即可，不需要同步更新todo自身的id，当前代码的这部分逻辑本身是正确的。

如果List组件无法正确显示ID，需要检查组件是否正确接收并使用了todo项的id属性。

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