React中useState状态更新滞后，首次点击按钮error为空问题求解

1. 状态初始值类型不匹配：error的初始值设为布尔值false，但后续实际存储的是对象类型。Object.keys(false)本身返回空数组，首次执行判断时天然满足length === 0的条件。
2. React状态更新的异步特性：在onSubmitHandler中执行setError后立即调用setReadOnlyMode，此时setReadOnlyMode读取的error是当前渲染周期的旧值，并不是setError更新后的新值，因此首次点击判断的是旧状态，第二次点击才能拿到上一次更新完成的状态。
3. 状态修改不规范：setError的函数式更新中直接修改原状态对象prev，属于不符合不可变原则的写法，容易引发不可预期的问题。

第一步：修正基础错误 #

• 统一error的类型，初始值改为空对象
• 调整setError的写法，遵循不可变更新原则

// 初始值改为空对象
const [error, setError] = useState({});

// 调整状态更新逻辑，不直接修改原prev
setError((prev) => {
  const newError = {...prev};
  emptyInputs.forEach((key) => {
    newError[key] = true;
  });
  return newError;
});

第二步：解决状态读取异步问题，二选一即可 #

方案A：直接使用当前计算的空输入结果判断，不依赖state

不用等待状态更新完成，直接用当前计算出的emptyInputs做判断，避免闭包问题：

// 改造setReadOnlyMode，接收是否存在空输入的参数
const setReadOnlyMode = (hasEmptyInput) => {
  if (!hasEmptyInput) {
    setCanEdit(false);
    setIsReadOnly(true);
    setIsDisabled(true);
  }
}

// 在onSubmitHandler中计算完emptyInputs后直接调用
const onSubmitHandler = (info) => {
  // 原有逻辑省略
  const emptyInputs = // 你原有计算空输入项的逻辑
  // 更新error状态
  setError(prev => {
    const newError = {...prev};
    emptyInputs.forEach(key => newError[key] = true);
    return newError;
  })
  // 直接用当前计算结果判断，不依赖state中的error
  const hasEmptyInput = emptyInputs.length > 0;
  setReadOnlyMode(hasEmptyInput);
  return !hasEmptyInput;
}

方案B：通过useEffect监听error变化自动执行逻辑

把切换只读模式的逻辑和error状态绑定，error更新后自动触发判断：

// 新增useEffect监听error变化
useEffect(() => {
  if (Object.keys(error).length === 0) {
    setCanEdit(false);
    setIsReadOnly(true);
    setIsDisabled(true);
  }
}, [error])

// 按钮点击事件中移除setReadOnlyMode的调用
<SaveModifiedInfosBtn 
  updateCientInfo={() => isChanged && onSubmitHandler(info)} 
  margin="ms-3" 
/>

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