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

Question

I want to render x numbers times a specific component according to what the user chooses.

I wrote this function:

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

But when I call it inside the render function it doesn't generate anything unless the totalWeeks is 1.

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

Why is it like this? I didn't get it, can someone explain it to me?

Answer 1

Seems like there is a typo in the for loop condition - i === totalWeeks , that's why the for loop is being run only once and only if totalWeeks equals 1. Try replacing the for loop you have with the following:

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