如何将组件存储在数组中并在需要时在 React 中渲染它们？答案

【问题标题】：How to store components in an array and render them when I need in React?如何将组件存储在数组中并在需要时在 React 中渲染它们？
【发布时间】：2021-05-07 10:18:27
【问题描述】：

我想根据用户的选择来渲染 x 次特定组件。

我写了这个函数：

const generateShiftsForm = (totalWeeks) => {
        const shiftWeeks = 1;
        const shiftList = [];
        for (let i = shiftWeeks; i === totalWeeks; i++) {
          shiftList.push(<ShiftForm totalMinutes={totalMinutes} setTotalMinutes={setTotalMinutes}/>);
        }
        return shiftList;
      };

但是当我在渲染函数中调用它时，它不会生成任何东西，除非 totalWeeks 为 1。

  {generateShiftsForm(shiftNumber).map((form) => (form))}

为什么会这样？没看懂，谁能解释一下？

【问题讨论】：

i === totalWeeks 应该是i <= totalWeeks
你的循环条件不正确，只有当起始值和结束值相同时才会为真，即都是 1，或者都是 2，等等。不要将反应组件存储在状态中，它是获得陈旧状态/道具外壳的可靠方法。您应该只存储数据并从中呈现 UI。在你的渲染中使用[...Array(totalWeeks).keys()].map(i => <ShiftForm key={i} tota......。
这能回答你的问题吗？ stackoverflow.com/questions/46964332/…

标签： javascript reactjs array.prototype.map

【解决方案1】：

似乎在 for 循环条件中存在拼写错误 - i === totalWeeks，这就是为什么 for 循环只运行一次且仅在 totalWeeks 等于 1 时运行的原因。尝试将您拥有的 for 循环替换为以下内容：

for (let i = shiftWeeks; i <= totalWeeks; i++) {...}

【讨论】：