React应用中初始化的JS数组为何自动填充多余React元素？

核心问题原因 #

1. 你声明的arr是模块级的全局变量，只要该模块不被重新加载，这个变量会一直存在。而React组件每次重渲染都会执行getAnswers方法，每次调用都会往同一个arr里push4个答案元素，重复渲染的次数越多，数组长度越大。
2. 开发环境下React默认开启StrictMode，会自动执行两次组件渲染来排查异常副作用，这也是为什么你什么都没做数组长度最少也有8的原因。
3. 你看到的「初始化后立刻打印数组就有值」是浏览器控制台的特性：打印引用类型时，控制台存储的是引用，展开查看时才会读取当前的实际值，并不是打印那一刻的快照。你可以换成console.log(JSON.parse(JSON.stringify(arr)))打印就能看到初始化时确实是空数组。

修复方案 #

不要用全局变量存储组件渲染用的临时数据，将数组生成逻辑移到组件内部，每次渲染时重新生成答案元素数组即可，修改后的question_card.js代码如下：

const tempData = {
  id: 2,
  question_text: "When was the enigma code cracked?",
  answers: [
    { answer_text: 1941 },
    { answer_text: 1942 },
    { answer_text: 1939 },
    { answer_text: 1943 },
  ],
};

function QuestionCard() {
  // 每次渲染重新生成答案元素数组，不存在历史数据堆积
  const answerArr = tempData.answers.map((answer, index) => (
    <p key={index}>{answer.answer_text}</p>
  ));
  return(
    <div>
      <p>{tempData.question_text}</p>
      <div>{answerArr}</div>
    </div>
  );
}

export default QuestionCard;

如果后续需要动态修改答案数据，可以把tempData存在useState hook里，避免全局变量污染。

内容的提问来源于stack exchange，提问作者elrico