React中onSubmit提交异常：首次提交返回空数据第二次才生效

React 的setState是异步批量更新的，在同一个函数作用域内调用setUserInput后，userInput状态不会立刻生效，此时访问到的仍然是更新前的旧值，也就是初始的空对象{ userName: "", userText: "" }。

第一次提交时，你往comments数组中插入的是还没更新的旧userInput，所以拿到空数据。等提交函数执行完成后，userInput状态才会更新为你本次输入的内容，第二次提交时你用到的userInput就是第一次输入的内容，所以表现为第二次提交才返回正确内容，本质是状态更新滞后了一次。

你已经通过ref拿到了输入的实时值，不需要依赖userInput状态来更新评论列表，直接用拿到的输入值构造新评论对象插入即可，修改提交函数代码如下：

const submitHandler = (event) => {
  event.preventDefault();
  const enteredName = nameInput.current.value;
  const enteredText = commentText.current.value;
  // 直接构造新评论对象，不依赖旧的state值
  const newComment = { userName: enteredName, userText: enteredText };
  setUserInput(newComment);
  setComments(prevComments => [...prevComments, newComment]);
};

如果后续业务没有单独使用userInput状态的需求，你甚至可以直接删除userInput相关的状态声明，精简代码。

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