React表单首次提交users状态未更新，二次提交才生效问题咨询

核心原因 #

React的useState更新是异步的，且组件函数每次渲染时，state值会被当前作用域的闭包捕获。

在你的代码里：

• 首次点击提交按钮时，setUsers([...users, data])只是发起了state更新请求，但当前submitHandler函数里的users还是初始的空数组（因为更新还未完成，组件未重新渲染）。
• 紧接着的console.log("2", users)和props.getUsers(users)传递的都是旧的空数组，这就导致你看起来“首次提交没写入数据”。
• 等组件重新渲染后，users才会更新为包含新数据的数组。第二次点击时，submitHandler里的users已经是更新后的数组，所以新数据能被正确添加，相关操作也能拿到最新值。

解决办法 #

有两种可靠的方式解决这个问题：

1. 使用函数式更新（推荐）

setUsers支持传入一个函数，这个函数会接收最新的state值作为参数，确保你基于最新数据更新：

const submitHandler = (e) => {
  e.preventDefault();
  // 用prevUsers获取最新的state值
  setUsers(prevUsers => [...prevUsers, data]);
  // 如需立即传递最新数据，可先创建临时变量
  const newUsers = [...users, data];
  props.getUsers(newUsers);
};

2. 提前创建临时变量

如果需要在更新后立即使用新的数组，可以先把新数据存到临时变量里，再用这个变量更新state和传递给父组件：

const submitHandler = (e) => {
  e.preventDefault();
  const newUsers = [...users, data];
  setUsers(newUsers);
  console.log("2", newUsers);
  props.getUsers(newUsers);
};

额外优化点 #

你的data state更新也存在类似闭包风险（比如快速输入时可能丢失内容），建议同样改成函数式更新：

// Username输入框的onChange
onChange={(e) => {
  setData(prevData => ({ ...prevData, username: e.target.value }));
}}

// Age输入框的onChange
onChange={(e) => {
  setData(prevData => ({ ...prevData, age: e.target.value }));
}}

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