React中useState首次提交不更新，二次点击才生效问题求助

核心问题原因 #

1. 状态更新异步性：setDataValue 是异步操作，调用后立刻 console.log(dataValue) 拿到的始终是更新前的旧值，并非真的没更新。
2. 异步请求与状态更新时序混乱：调用异步的 fetchData 后立刻执行 setItem(0) 和 setEmail('')，导致 useEffect 因 item 和 email 变化重新触发，此时请求还未完成，后续状态更新逻辑被打乱。
3. ignore 变量无效：useEffect 每次执行都是独立闭包，局部变量 ignore 无法跨闭包生效，起不到防止重复执行的作用。
4. 提前判断 dataValue：在异步请求未完成时就判断 dataValue.length，此时新数据还没存入状态，自然不会触发 toast。

修复后的代码 #

表单部分（无需修改）

<form onSubmit={(e) => submitClick(e)}>
    <label className='labelValue'>Email</label>
      <input
      type="text"
      className='w-full border-2 border-slate-100 p-2 md:rounded-lg mt-1 md:mt-2'
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder='Email here' />
    <button disabled={disabledNow} className='btn w-full'>
       {disabledNow ? "Account are created now." : "Create user"}
    </button>
</form>

提交逻辑部分

const [email, setEmail] = useState('');
const [dataValue, setDataValue] = useState([]);
const [disabledNow, setDisabledNow] = useState(false);

// 直接在提交函数中处理异步请求，逻辑更清晰
const submitClick = async (e) => {
  e.preventDefault();
  setDisabledNow(true); // 先禁用按钮防止重复提交

  try {
    const dataMail = { Email: email };
    const result = await axios.post("https://localhost:7176/api/user", dataMail);
    const fetchItem = result.data;
    
    setDataValue(fetchItem); // 更新状态
    toast(fetchItem[1], { duration: 7000 }); // 直接用返回值触发提示，无需等待状态更新
    setEmail(''); // 清空输入框
  } catch (error) {
    // 可选：添加错误处理，比如提示用户提交失败
    console.error('提交失败:', error);
  } finally {
    setDisabledNow(false); // 请求完成后恢复按钮状态
  }
}

// 若需监听dataValue变化做后续操作，单独写useEffect
useEffect(() => {
  if (dataValue.length > 0) {
    console.log("数据已更新:", dataValue);
  }
}, [dataValue]);

关键优化点 #

• 把异步请求逻辑直接放在 submitClick 中，去掉多余的 item 状态，避免依赖 useEffect 触发请求，逻辑更直观。
• 用 try/catch/finally 处理异步请求，确保无论成功失败都能恢复按钮状态。
• 直接使用请求返回的 fetchItem 触发 toast，无需等待 setDataValue 异步完成。
• 移除无效的 ignore 变量，简化逻辑。

内容的提问来源于stack exchange，提问作者J. Petersen