Javascript 在Typescript中循环

我正在做一个测验页面，测验结束后，我将显示所有正确答案。对于显示答案，我将获取一个列表并添加所有问题和更正，并在列表中呈现列表，但我得到的是重复的答案，我不知道问题是什么，请帮助

截图=>

从“React”导入React；
类型道具={
问题：字符串| any[]；
};
常量项：任意[]=[]；
const iterateQ=（问题：string | any[]）=>{
设a=0；
让大小=问题长度；
while（a (
{iterateQ（问题）}
);
导出默认ShowAns；

试试这段代码

import React from "react";

type Props = {
    questions: string | any[];
};

// const items: any[] = []; <==== remove this
const iterateQ = (question:string | any[]) => {
  let a = 0;
  let size = question.length;
  const items: any[] = [] // <==== declare here, so every time function is called, it will be a new array.
  while(a < size) {
    items.push(
      <div>
        <div className="font-normal">
            Question No: {a}
        </div>
        <div className="font-bold">
            {question[a].question}
        </div>
        <div className="bg-green-300 font-bold font-color p-1 rounded-lg shadow-lg w-full mt-2">
            {question[a].answer[question[a].correctAnswer].answerText}
        </div>
      </div>
    );
    a = a + 1;
  }
  return items;
}


const ShowAns: React.FC<Props> = ({
    questions,
}) => (
    <>
       <div className="justify-center items-center">
         {iterateQ(questions)}
       </div>
    </>
);

export default ShowAns;

从“React”导入React；
类型道具={
问题：字符串| any[]；
};
//常量项：任意[]=[]；{
设a=0；
让大小=问题长度；
常量项：任意[]=[]//(
{iterateQ（问题）}
);
导出默认ShowAns；

尝试

控制台。记录问题并查看是否存在重复项（可能）您在组件外部创建了一次
items
数组，这是永恒的。它会随着每次渲染调用而增长。在
iterateQ
函数中创建数组。顺便说一下，..
items
实际上应该是组件内部的一个状态变量，每当
questions
发生更改时，它都会重新计算
import React from "react";

type Props = {
    questions: string | any[];
};

// const items: any[] = []; <==== remove this
const iterateQ = (question:string | any[]) => {
  let a = 0;
  let size = question.length;
  const items: any[] = [] // <==== declare here, so every time function is called, it will be a new array.
  while(a < size) {
    items.push(
      <div>
        <div className="font-normal">
            Question No: {a}
        </div>
        <div className="font-bold">
            {question[a].question}
        </div>
        <div className="bg-green-300 font-bold font-color p-1 rounded-lg shadow-lg w-full mt-2">
            {question[a].answer[question[a].correctAnswer].answerText}
        </div>
      </div>
    );
    a = a + 1;
  }
  return items;
}


const ShowAns: React.FC<Props> = ({
    questions,
}) => (
    <>
       <div className="justify-center items-center">
         {iterateQ(questions)}
       </div>
    </>
);

export default ShowAns;