useState更新函数失效求助：表单提交时状态未更新、useEffect未触发

这是一个典型的React状态更新陷阱，核心原因和解决思路如下：

为什么你的状态更新不生效？ #

React的useState钩子使用浅比较来判断是否需要触发状态更新：只有当新状态的引用（或基本类型的值）和旧状态不同时，才会触发重渲染和关联的useEffect。

你的代码里有两个可能的问题点：

1. FormField类的实例复用：如果你的FormField类实现中存在缓存逻辑（比如为了性能复用相同参数的实例），那么当验证后属性值没有变化时，new FormField()会返回和旧状态相同的引用，React会认为状态没变化，跳过更新。
2. 闭包捕获旧状态：如果validateHeight函数是在某个闭包中定义的，可能捕获了旧的heightField值，导致基于旧值创建的新对象和当前实际状态没有差异，从而无法触发更新。

具体解决方法 #

方法1：确保FormField每次返回新实例 #

检查你的FormField类实现，去掉任何实例缓存或复用的逻辑，保证每次new FormField()都生成全新的实例：

class FormField<T> {
  constructor(
    public value: T,
    public error: boolean = false,
    public errorMessage: string = ""
  ) {
    // 不要在这里添加缓存或返回旧实例的代码
  }
}

方法2：使用函数式更新获取最新状态 #

改用函数式更新的方式调用setHeightField，这样可以确保你总是基于最新的状态值创建新实例，彻底避免闭包捕获旧状态的问题：

const validateHeight = () => {
  // 用函数式更新，prev参数是最新的状态值
  setHeightField(prevHeightField => {
    const heightNumber = parseInt(prevHeightField.value);
    let error = false;
    let errorMessage = "";

    if (!heightNumber) {
      error = true;
      errorMessage = "Wrong number, please verify.";
    } else if (heightNumber < 0 || heightNumber > 220) {
      error = true;
      errorMessage = "Please verify the height";
    }

    return new FormField<string>(prevHeightField.value, error, errorMessage);
  });
};

调用这个函数时不需要传入heightField参数，函数式更新会自动帮你拿到最新的状态。

方法3：改用普通对象代替类（推荐） #

类的实例容易带来引用层面的困惑，改用普通TypeScript类型和对象字面量可以从根源避免这类问题：

// 先定义FormField类型
type FormField<T> = {
  value: T;
  error: boolean;
  errorMessage: string;
};

// 初始化状态
const [heightField, setHeightField] = useState<FormField<string>>({
  value: "",
  error: false,
  errorMessage: ""
});

// TextField的onChange逻辑调整
<TextField
  required
  label="Height (cms)"
  margin="normal"
  variant="outlined"
  type="number"
  value={heightField.value}
  onChange={(event) => {
    setHeightField(prev => ({
      ...prev,
      value: event.target.value,
      error: false,
      errorMessage: ""
    }));
  }}
  error={heightField.error}
  helperText={heightField.errorMessage}
/>

// 验证函数调整
const validateHeight = () => {
  setHeightField(prev => {
    const heightNumber = parseInt(prev.value);
    let error = false;
    let errorMessage = "";

    if (!heightNumber) {
      error = true;
      errorMessage = "Wrong number, please verify.";
    } else if (heightNumber < 0 || heightNumber > 220) {
      error = true;
      errorMessage = "Please verify the height";
    }

    return {
      ...prev,
      error,
      errorMessage
    };
  });
};

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