React组件渲染异常：如何按Redux状态值渲染指定数量的DesignRow组件？

你的代码之所以会无限渲染，核心问题有两个：

1. useEffect 的依赖数组写了 designRows，但你在 useEffect 里又调用 setDesignRows 修改这个状态——每次状态更新都会触发 useEffect 重新执行，循环往复就形成了无限渲染。
2. 循环里多次调用 setDesignRows，每次都基于当前的 designRows 追加元素，不仅会触发多次状态更新，还会导致组件重复渲染。

方案1：修复 useEffect 逻辑（保留本地状态） #

把 useEffect 的依赖改成全局状态 design，只在 design 变化时生成新的组件数组；同时一次性生成完整数组再更新状态，避免多次调用 setDesignRows：

function Design() {
  const [designRows, setDesignRows] = useState([]);
  const design = useSelector((state) => state.design);

  useEffect(() => {
    // 根据design的值生成新的DesignRow数组
    const newRows = [];
    for (let i = 0; i < design; i++) {
      newRows.push(<DesignRow key={i} />);
    }
    setDesignRows(newRows);
  }, [design]); // 仅当全局design变化时执行

  return (
    <>
      <section className='mt-5 p-3 w-2/5'>
        <div className='text-center p-2 h-20 bg-gray-200 font-bold text-lg'>Game Design</div>
        <div className='border p-3 mt-6 text-gray-500 font-medium text-sm'>
          {designRows}
        </div>
      </section>
    </>
  );
}

export default Design;

方案2：直接基于全局状态渲染（更简洁，推荐） #

其实完全不需要维护 designRows 这个本地状态，直接在渲染阶段根据 design 的值动态生成组件即可，代码更简洁高效：

function Design() {
  const design = useSelector((state) => state.design);

  return (
    <>
      <section className='mt-5 p-3 w-2/5'>
        <div className='text-center p-2 h-20 bg-gray-200 font-bold text-lg'>Game Design</div>
        <div className='border p-3 mt-6 text-gray-500 font-medium text-sm'>
          {/* 用Array.from快速生成指定长度的组件数组 */}
          {Array.from({ length: design }, (_, index) => (
            <DesignRow key={index} />
          ))}
        </div>
      </section>
    </>
  );
}

export default Design;

• 方案2是最优选择：不需要额外维护本地状态，直接依赖Redux全局状态渲染，减少了状态同步的潜在问题。
• 永远避免在 useEffect 的依赖数组中加入会被自身修改的状态，这是引发无限循环的高频原因。
• 使用 Array.from({length: n}) 生成数组比for循环更简洁，适合这种动态渲染组件的场景。

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