React表单FormState更新不及时，下拉选值无法同步文本框必填状态

你的问题核心在于React useState的更新是异步的，你在handleShowHide里调用setFormState后立刻去读取formState.Info（这里还有个大小写错误：你的表单字段是info而非Info），此时拿到的还是更新前的旧值，导致showHide状态设置错误。而且你完全不需要单独维护showHide状态，直接用formState.info的值来控制文本框的必填状态更可靠，能彻底避免状态不同步的问题。

具体修改步骤： #

1. 移除多余的showHide状态
   删掉类似const [showHide, setShowHide] = useState(false);的定义，直接依赖formState.info的值做判断。

2. 修改文本框的必填类控制逻辑
   把文本框ControlLabel的className直接通过formState.info判断：

   <ControlLabel className={formState.info === 'Yes' ? "required-field" : ""}>
     {retrieveLanguage(language, 'Number')}
   </ControlLabel>
   

3. 调整下拉框的事件触发时机
   你当前在onBlur时调用handleShowHide，用户选完下拉框还得失去焦点才会触发状态切换，体验不佳。应该直接在onChange里处理逻辑：

   <FormControl
     name="info"
     accepter={SelectPicker}
     data={haveInfoData}
     errorMessage={errorState.haveInfoError}
     value={formState.info}
     onChange={(e) => {
       // 生成新的表单状态
       const newFormState = { ...formState, info: e };
       setFormState(newFormState);
       // 用新状态做验证
       const validationResult = validatePersonalDetails("info", e, newFormState, language);
       setErrorState({
         ...errorState,
         haveInfoError: validationResult.error
       });
     }}
   />
   

4. 如果保留handleShowHide函数的修复方案
   若仍想用单独的处理函数，不要用formState.info判断，直接用传入的e参数（这就是当前选中的最新值）：

   const handleShowHide=(fieldName,e)=>{
     const newFormState = { ...formState, [fieldName]: e };
     setFormState(newFormState);
     const validationResult = validatePersonalDetails(fieldName, e, newFormState, language);
     setErrorState({
       ...errorState,
       [`${fieldName}Error`]: validationResult.error
     });
     // 直接用e判断，无需等待formState更新
     setShowHide(e === 'Yes');
   }
   

   但更推荐第一种方案，直接依赖formState.info，减少冗余状态。

完整修改后的核心代码示例： #

// 下拉框部分
<FormGroup>
  <ControlLabel className="required-field">{retrieveLanguage(language, 'info')}</ControlLabel>
  <FormControl
    name="info"
    accepter={SelectPicker}
    data={haveInfoData}
    errorMessage={errorState.haveInfoError}
    value={formState.info}
    onChange={(e) => {
      const newFormState = { ...formState, info: e };
      setFormState(newFormState);
      const validationResult = validatePersonalDetails("info", e, newFormState, language);
      setErrorState({
        ...errorState,
        haveInfoError: validationResult.error
      });
    }}
  />
</FormGroup>

// 文本框部分
<FormGroup>
  <ControlLabel className={formState.info === 'Yes' ? "required-field" : ""}>
    {retrieveLanguage(language, 'Number')}
  </ControlLabel>
  <FormControl 
    name="Number"
    errorMessage={errorState.NumberError}
    value={formState.Number}
    onBlur={(e) => onFieldChange("Number", e.target.value)}
    onChange={(e) => setFormState({ ...formState, Number: e })} 
  />
</FormGroup>

这样修改后，下拉框选中值的瞬间，文本框的必填状态就会同步更新，彻底解决异步状态更新带来的延迟问题。

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