Foreach 循环永远运行 ReactJS

我试图根据props 中收到的问题数量加载QuestionsComponent个组件；

功能正常，但应用程序挂起后，在控制台中，我可以看到console.log(steps);得到记录无限次.

我做错了什么？

请帮忙

const DynamicForm: React.FC<any> = ({ questions }) => {
  const q: any = [];
  const [steps, setSetps] = useState([]);
  const [step, setStep] = useState(0);
  const refs = useRef<(HTMLDivElement | null)[]>([]);
  useEffect(() => {
    questions.forEach((question: any) => {
      q.push(QuestionsComponent);
    });
    setSetps(q);
    console.log(steps);

    scrollToComponent(refs.current[step], {
      offset: -100,
      align: 'top',
      duration: 1000,
    });
  }, [steps, questions, step, q]);

  return (
    <div>
      {steps
        .filter((_: any, index: any) => index <= step)
        .map((Step: any, index: any) => (
          <Step
            // eslint-disable-next-line
            key={index}
            question={questions[index]}
            domRef={(ref: any) => { refs.current[index] = ref; }}
            toPrev={() => {
              scrollToComponent(refs.current[index - 1]);
            }}
            toNext={() => {
              if (step === index + 1) {
                scrollToComponent(refs.current[index + 1]);
              }
              setStep(index + 1);
            }}
            setStep={setStep}
            step={index}
          />
        ))}
    </div>
  );
};