React与uniqid不生成id

Question

我正在为我的第一个react项目制作待办事项列表。我正在为我的todo对象使用唯一id生成器，但我目前设置它的方式是返回一个id，而不是一个随机id。如果我在handlessubmit函数之外设置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([]);
}

Answer 1

uniqid()的使用似乎是正确的，只是setTodo将在组件的下一次渲染中更新todo的值，但在同一事件块中的以下console.log(todo)仍然只有更新前的旧值。

显示生成的唯一ID的实例:stackblitz

上面的示例还将handleChange和handleAdd更改为以下格式，以便可以使用之前的值而不会产生潜在的冲突。

function handleChange(e) {
setTodo((prev) => {
return { ...prev, name: e.target.value };
});
}
function handleAdd(newTodo) {
setTodoList((prev) => [...prev, newTodo]);
}

还添加了一个useRef来清空提交后的input，因为最初的实现将状态值清理为""，但似乎没有为input做同样的事情。

import { useRef } from 'react';
function handleSubmit(e) {
e.preventDefault();
...
setTodo((prev) => {
return { ...prev, name: "" };
});
newTodoRef.current.value = "";
}

希望对你有帮助。