两个独立状态引发React useEffect无限循环问题求助

问题根源 #

提交含空值的表单后触发无限循环，核心原因有两点：

1. 依赖项错误：useEffect使用Object.values(createForm)作为依赖，每次渲染都会生成新的数组引用——哪怕createForm内容未变，React的浅比较机制会判定依赖发生变化，导致useEffect反复执行。
2. 逻辑闭环：当validationErrorIndexes存在值时，useEffect会调用validateFormFields更新错误索引；结合依赖项的频繁变化，形成无限触发的循环。

解决方案 #

1. 修正useEffect依赖项

将依赖从Object.values(createForm)改为createForm——只有当表单内容真正变化（用户输入修改字段）时，才触发验证逻辑，避免无意义的重复执行。

2. 调整useEffect执行逻辑

移除对validationErrorIndexes.length的判断，每当表单数据变化时直接执行验证，实现输入框状态的实时更新。

修改后的完整代码 #

const [createForm, setCreateForm] = React.useState(() => createFormFields);
const [validationErrorIndexes, setValidationErrorIndexes] = React.useState([]);

// 表单验证逻辑
const validateFormFields = () => {
  const newIndexes = [];
  createForm.forEach((field, i) => {
    if (!field.value) {
      newIndexes.push(i);
    }
  });
  setValidationErrorIndexes(newIndexes);
};

// 修正后的useEffect，实现实时验证
React.useEffect(() => {
  validateFormFields();
}, [createForm]);

// 表单提交逻辑
const handleCreateSubmit = (e) => {
  e.preventDefault();
  if (createForm.every(formField => Boolean(formField.value))) {
    console.log(createForm);
    // TODO: dispatch -> POST/createUser...
  } else {
    validateFormFields();
  }
};

// 表单渲染部分
{createForm && createForm.length && createForm.map((formEl, i) => {
  if (formEl.type === 'select') {
    return (
      <Select
        className={`create-select ${validationErrorIndexes.includes(i) ? 'error' : ''}`}
        styles={customStyles}
        placeholder={formEl.label}
        key={i}
        value={formEl.value}
        onChange={(selectedOption) => handleOptionChange(selectedOption, i)}
        options={formEl.options}
      />
    );
  }
  return (
    <CustomInput 
      key={i} 
      label={formEl.label} 
      type={formEl.type} 
      value={formEl.value} 
      formState={createForm} 
      formStateSetter={setCreateForm} 
      index={i} 
      validationErrorIndexes={validationErrorIndexes} 
    />
  );
})}

额外优化建议 #

• 类名判断简化：直接用validationErrorIndexes.includes(i)即可，空数组时includes会返回false，无需额外判断数组长度。
• 子组件props语义化：将i改为index，提升代码可读性。

内容的提问来源于stack exchange，提问作者emre-ozgun