React TypeScript中使用event.target.value调用setState不生效问题

问题场景 #

在React表单提交函数中调用setState并使用preventDefault后，打印表单输入值能得到正确结果，但打印状态变量ucasTariff始终是旧值，第二次提交才会显示上一次的输入值。相关代码如下：

const [ucasTariff, setUcasTariff] = useState<string>('');

const handleSubmit = async (e: FormEvent) => {
  e.preventDefault();
  
  const target = e.target as typeof e.target & {
    ucasPoints: {value: string};
  };
  
  setUcasTariff(target.ucasPoints.value);
}

表单调用方式：

<form onSubmit={(e) => handleSubmit(e)}>...</form>

原因分析 #

React的useState更新是异步批量处理的，在同一个事件回调（比如表单提交的handleSubmit）中，调用setState后状态不会立刻更新。因此在setUcasTariff之后立刻打印ucasTariff，拿到的还是更新前的初始值或旧值；第二次提交时，上一次的状态更新已完成，所以会显示之前的输入值。

解决方案 #

方案1：用useEffect监听状态变化处理后续逻辑 #

如果需要在状态更新后执行操作（比如打印、发送请求），可以通过useEffect监听ucasTariff的变化，在回调中处理：

import { useState, useEffect, FormEvent } from 'react';

const [ucasTariff, setUcasTariff] = useState<string>('');

// 监听ucasTariff变化，状态更新后触发
useEffect(() => {
  if (ucasTariff) {
    console.log('更新后的ucasTariff:', ucasTariff);
    // 在这里发送axios请求
    // axios.post('/api/your-endpoint', { points: ucasTariff });
  }
}, [ucasTariff]); // 依赖项设为ucasTariff，状态变化时执行

const handleSubmit = async (e: FormEvent) => {
  e.preventDefault();
  
  const target = e.target as typeof e.target & {
    ucasPoints: {value: string};
  };
  
  const newValue = target.ucasPoints.value;
  setUcasTariff(newValue);
  // 如需立即使用输入值，直接用newValue而非ucasTariff
  console.log('当前输入值:', newValue);
}

方案2：直接使用表单输入值执行即时操作 #

如果提交时需要立刻基于输入值做操作（比如发送请求），无需依赖状态变量，可以直接使用从表单获取的newValue，跳过等待状态更新的步骤：

const handleSubmit = async (e: FormEvent) => {
  e.preventDefault();
  
  const target = e.target as typeof e.target & {
    ucasPoints: {value: string};
  };
  
  const newValue = target.ucasPoints.value;
  setUcasTariff(newValue);
  
  // 直接用newValue发送请求，无需等待状态更新
  try {
    const response = await axios.post('/api/submit-points', { points: newValue });
    console.log('请求成功:', response.data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

避免错误方案 #

不要使用setTimeout强制同步更新或修改React的批量更新机制，这类方案会破坏React的异步更新逻辑，可能导致请求时机错误、状态不一致等新问题，上述两种方案是React官方推荐的正确处理方式。

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