React.js 测验应用API数据处理问题：避免正确答案重复并实现选项随机排序

我来帮你搞定这个问题！你遇到的答案重复问题，核心原因是直接修改了API返回的原始incorrect_answers数组——每次组件重新渲染（比如点击按钮触发状态更新），push操作都会给原数组再添加一次正确答案，导致重复数量越来越多。同时，要实现正确答案随机调换位置，我们可以用公平高效的洗牌算法来处理。

第一步：避免修改原始数据，合并正确与错误答案 #

永远不要直接修改API返回的原始数据（这会导致不可预测的副作用），而是创建一个新数组来合并正确答案和错误答案：

// 针对单个题目，合并答案并返回新数组
const getCombinedAnswers = (question) => {
  // 使用扩展运算符创建新数组，不修改原数据
  return [...question.incorrect_answers, question.correct_answer];
};

第二步：实现公平的随机排序（Fisher-Yates洗牌算法） #

比起用sort(() => Math.random() - 0.5)这种随机性不均的方法，Fisher-Yates洗牌算法能保证每个元素的位置都是真正随机的：

const shuffleArray = (array) => {
  // 先复制原数组，避免修改原始合并后的数组
  const shuffled = [...array];
  for (let i = shuffled.length - 1; i > 0; i--) {
    // 生成0到i之间的随机索引
    const j = Math.floor(Math.random() * (i + 1));
    // 交换当前元素和随机索引的元素
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }
  return shuffled;
};

第三步：在React组件中整合使用 #

你可以在渲染每个题目时，先合并答案再洗牌，这样每次渲染都会得到全新的随机选项，且不会修改原始API数据：

import { useState, useEffect } from 'react';

const QuizApp = () => {
  const [questions, setQuestions] = useState([]);

  // 从API获取题目数据
  useEffect(() => {
    fetch('你的API地址')
      .then(res => res.json())
      .then(data => {
        // 直接存储原始API数据，不做修改
        setQuestions(data.results);
      })
      .catch(err => console.error('获取数据失败：', err));
  }, []);

  // 处理答案点击
  const handleAnswerSelect = (selectedAnswer, correctAnswer) => {
    if (selectedAnswer === correctAnswer) {
      alert('回答正确！');
    } else {
      alert(`回答错误，正确答案是：${correctAnswer}`);
    }
  };

  return (
    <div className="quiz-container">
      {questions.map((question, questionIndex) => {
        // 合并并洗牌答案
        const allAnswers = shuffleArray(getCombinedAnswers(question));
        return (
          <div key={questionIndex} className="question-card">
            <h3>{question.question}</h3>
            <div className="answer-buttons">
              {allAnswers.map((answer, ansIndex) => (
                <button
                  key={ansIndex}
                  onClick={() => handleAnswerSelect(answer, question.correct_answer)}
                  className="answer-btn"
                >
                  {answer}
                </button>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default QuizApp;

为什么这个方案能解决你的问题？ #

1. 避免重复：我们始终创建新数组来处理答案，从不修改API返回的原始incorrect_answers，所以不会出现每次渲染都追加正确答案的情况。
2. 真正随机：Fisher-Yates算法确保每个选项的位置都是公平随机的，不会出现某些位置概率偏高的问题。
3. 可维护性：把合并和洗牌逻辑抽成独立函数，代码更清晰，后续修改也更方便。

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