React Hook状态更新时，如何同步重新渲染循环测试条件？

你的代码存在几个关键问题，导致循环生成的表单项无法随状态同步更新：

• eachForm函数的for循环里，第一次迭代就执行了return，不管formLength设为多少，永远只会生成1个<div>。
• 渲染时错误地把eachForm当作React组件（<eachForm />）调用，但它只是普通函数，应该直接执行eachForm()。
• useEffect里调用eachForm完全多余，React在状态更新后会自动触发组件重新渲染，不需要手动触发这个函数。

修正后的代码（基于原逻辑调整） #

import { useState } from 'react';

function YourFormComponent() {
  const [formLength, setFormLength] = useState(0);

  // 修正循环逻辑：收集所有表单项后统一返回
  const eachForm = () => {
    const formItems = [];
    for (let x = 0; x < formLength; x++) {
      formItems.push(<div key={x}>{x+1} input</div>);
    }
    return formItems;
  };

  return (
    <div>
      {/* 新增输入框用于测试状态更新 */}
      <input
        type="number"
        value={formLength}
        onChange={(e) => setFormLength(Number(e.target.value))}
        min="0"
      />
      {formLength <= 0 ? <>Zero</> : eachForm()}
    </div>
  );
}

更符合React习惯的写法（用map替代for循环） #

import { useState } from 'react';

function YourFormComponent() {
  const [formLength, setFormLength] = useState(0);

  return (
    <div>
      <input
        type="number"
        value={formLength}
        onChange={(e) => setFormLength(Number(e.target.value))}
        min="0"
      />
      {formLength <= 0 ? (
        <>Zero</>
      ) : (
        // 用Array.from生成对应长度的数组，再遍历渲染表单项
        Array.from({ length: formLength }, (_, index) => (
          <div key={index}>{index + 1} input</div>
        ))
      )}
    </div>
  );
}

注意：动态生成的元素必须添加唯一的key属性，帮助React识别元素变化，优化渲染性能。

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