React JS中遍历对象的方法：解决quizzes无法使用.map()的问题

一、直接将quizzes对象转为数组（推荐） #

如果你的quizzes对象结构是键为序号/ID，值为单个题目数据（比如{ 0: {questions: "...", correct_answers: "...", ...}, 1: {...} }），可以用以下几种方式转成数组后使用.map()：

1. 用Object.values()提取所有值
   直接拿到所有题目对象组成的数组，适合不需要保留原对象键的场景：

   // 转换为数组
   const quizList = Object.values(quizzes);
   
   // 生成组件
   return (
     <div className="quiz-container">
       {quizList.map((quiz, idx) => (
         <QuizPage
           key={idx} // 如果题目有唯一ID，建议用quiz.id代替idx
           question={quiz.questions}
           correctAnswer={quiz.correct_answers}
           incorrectAnswers={quiz.incorrect_answers}
         />
       ))}
     </div>
   );
   

2. 用Object.entries()保留键值对
   如果原对象的键是有用的标识（比如题目ID），用这个方法能同时拿到键和对应的数据，更适合做组件的key：

   return (
     <div className="quiz-container">
       {Object.entries(quizzes).map(([quizId, quiz]) => (
         <QuizPage
           key={quizId} // 用原对象的键作为唯一标识，比index更可靠
           question={quiz.questions}
           correctAnswer={quiz.correct_answers}
           incorrectAnswers={quiz.incorrect_answers}
         />
       ))}
     </div>
   );
   

3. 用Object.keys()遍历键再取值
   和Object.entries()逻辑类似，需要手动通过键获取对应的数据：

   return (
     <div className="quiz-container">
       {Object.keys(quizzes).map(quizId => {
         const quiz = quizzes[quizId];
         return (
           <QuizPage
             key={quizId}
             question={quiz.questions}
             correctAnswer={quiz.correct_answers}
             incorrectAnswers={quiz.incorrect_answers}
           />
         );
       })}
     </div>
   );
   

二、从源头优化：直接构建数组而非对象 #

其实在startQuiz函数处理数据时，你可以直接把数据整理成数组，后续就不用再做转换了：

// 初始化状态时就定义为数组
const [quizzes, setQuizzes] = useState([]);

const startQuiz = () => {
  // 遍历dataArray，直接生成题目数组
  const newQuizArray = dataArray.map(item => ({
    questions: item.questions,
    correct_answers: item.correct_answers,
    incorrect_answers: item.incorrect_answers
  }));
  // 更新状态为数组
  setQuizzes(newQuizArray);
};

// 后续直接用.map()
return (
  <div className="quiz-container">
    {quizzes.map((quiz, idx) => (
      <QuizPage
        key={quiz.id || idx}
        question={quiz.questions}
        correctAnswer={quiz.correct_answers}
        incorrectAnswers={quiz.incorrect_answers}
      />
    ))}
  </div>
);

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