在这种情况下如何渲染组件？我的方法是渲染无限组件答案

【问题标题】：How do I render component in this case ?My method is rendering infinite Components在这种情况下如何渲染组件？我的方法是渲染无限组件
【发布时间】：2022-09-25 12:45:12
【问题描述】：

function Design() {
  const[designRows,setDesignRows]=useState([])

  const design = useSelector((state) => state.design)
   

      useEffect(()=>{
      for (var i = 0; i < design; i++) {
       setDesignRows([...designRows, <DesignRow key={i} />])
       }
       },[designRows])

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.map(data=>(
            <>{data}</>
          ))}
        </div>
     
   </section>
   </>
  )
}

export default Design

上面的程序正在渲染无限的 DesignRow 组件，我想渲染“设计”没有组件。[设计是我的全局/redux 状态]

标签： reactjs react-redux

【解决方案1】：

您的问题的根源是您正在观察designRows 状态并以相同的useEffect 更新，这就是导致它无限循环的原因。我不完全了解您想要实现的目标，但我想您想渲染 n 个组件，其中 n 是您的设计数组的长度，如果是这样，您可以尝试：

function Design() {
  const [designRows, setDesignRows] = useState([])

  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'>

          {design.length > 0 && design.map((d, key) => (<DesignRow key={key} />))}
        </div>

      </section>
    </>
  )
}

export default Design

【讨论】：

设计只是整数值，而不是数组
顺便说一句，在我更改了一些代码后，它解决了我的问题，我将设计更改为一个数组，并将 DesignRow 组件推入其中，在我向其中添加整数的每个地方。谢谢

【解决方案2】：

您的代码 sn-p 将导致组件无限渲染，因为您正在更新 designRows in useEffect 的值，同时将其添加到 useEffect 的依赖项中。要解决此问题，请在 useEffect 中删除 designRows 的更新，或者从 useEffect 中的依赖数组中删除 designRows。

【讨论】：

【解决方案3】：

您需要将其更改为：

 useEffect(()=>{
      for (var i = 0; i < design; i++) {
       setDesignRows([...designRows, <DesignRow key={i} />])
       }
 },[design])

第二个参数是依赖关系——当更新时，它会触发效果。

【讨论】：

使用此方法仅渲染一个 DesignRow 组件