React Hooks中setState未更新：多表单动态渲染校验异常问题

你遇到的问题核心在于React的setState是异步且批量更新的，在formValidation的循环里多次调用setError会导致状态覆盖，最终只有最后一次的修改被应用到状态中，所以只有最后一个卡片的错误文本会更新。

问题根源分析 #

在你的校验逻辑里，循环中每次调用setError都是基于当时的error状态快照，但因为React会批量处理这些异步更新，后面的更新会覆盖前面的，最终只有最后一次循环的修改生效。比如循环i从0到2，三次setError操作最终只会保留i=2的修改，前两个i的错误状态都被覆盖了。

修复方案：构建完整错误对象后一次性更新 #

我们需要先创建一个新的错误对象，在循环中把所有校验错误都存入这个对象，最后一次性调用setError更新状态：

const formValidation = () => {
  console.log("entered Form validation function");
  let valid = true;
  // 创建一个新的错误对象，基于当前的error状态
  const newErrors = { ...error };

  for (let i = 0; i < selectedIndex; i++) {
    // 重置当前用户的id错误
    newErrors[i].uscf_id = "";
    if (registrationData[i].uscf_id === "") {
      newErrors[i].uscf_id = "ID is required";
      valid = false;
    } else {
      if (!(registrationData[i].uscf_id).match(/^[0-9]+$/) || registrationData[i].uscf_id.length !== 10) {
        newErrors[i].uscf_id = "ID must be a 10-digit number";
        valid = false;
      }
    }
    // 这里可以继续添加其他字段的校验逻辑，同样更新newErrors[i]对应的属性
    // ...
  }

  // 一次性更新错误状态
  setError(newErrors);
  return valid;
};

额外的优化建议 #

• 优化useEffect中的状态初始化
  你当前的useEffect每次selectedIndex变化时都会生成10个用户的状态，其实可以只生成到selectedIndex对应的数量，避免不必要的冗余：

  useEffect(() => {
    const userCount = selectedIndex;
    setCampaign(prev => ({
      ...prev,
      ...Object.fromEntries(
        Array.from({length: userCount}, (_, i) => [i, { sms_campaign: false, email_campaign: false }])
      )
    }));
    setError(prev => ({
      ...prev,
      ...Object.fromEntries(
        Array.from({length: userCount}, (_, i) => [i, { uscf_id:"", first_name:"", middle_name:"", last_name:"", city:"", state:"", country:"", phone_number:"", email_id:"" }])
      )
    }));
    setRegistrationData(prev => ({
      ...prev,
      ...Object.fromEntries(
        Array.from({length: userCount}, (_, i) => [i, { uscf_id:"", first_name:"", middle_name:"", last_name:"", sections:"", city:"", state:"", country:"", phone_code:"", phone_number:"", email_id:"", sms:"", email:"" }])
      )
    }));
  }, [selectedIndex])
  

• 卡片渲染的过滤逻辑优化
  你当前用registrations.filter((index)=>index<selectedIndex)，可以直接用Array.from生成需要渲染的索引，更直观：

  {Array.from({length: selectedIndex}, (_, i) => i).map(index => (
    <Card className={classes.cardLayout} key={index}>
      <Avatar className={classes.icon}>
        {index+1}
      </Avatar>
      <CardContent className={classes.cardContent}>
        <TextField 
          id={`outlined-error-helper-text-${index}`} 
          label="ID" 
          name="uscf_id" 
          placeholder="Enter ID" 
          variant="outlined" 
          helperText={error[index]?.uscf_id} 
          error={!!error[index]?.uscf_id} 
          onChange={(event)=>updateUserdata(event,index)} 
          className={classes.textField} 
          value={registrationData[index]?.uscf_id || ""}
        />
        {/* 其他表单字段 */}
      </CardContent>
    </Card>
  ))}
  

• updateUserdata函数的状态更新优化
  确保你的updateUserdata使用函数式更新，避免异步状态导致的更新丢失：

  const updateUserdata = (event, index) => {
    const { name, value } = event.target;
    setRegistrationData(prev => ({
      ...prev,
      [index]: {
        ...prev[index],
        [name]: value
      }
    }));
  };
  

这样修改后，表单校验时所有卡片的错误文本都会正确更新了。

内容的提问来源于stack exchange，提问作者Rittesh P.V