如何让React答题组件中正确答案按钮随机排序显示？

当前Question组件中，正确答案按钮为硬编码实现，始终固定显示在错误答案按钮最前方。需实现以下两种方案中的任意一种：

• 方案1：将正确答案按钮随机插入到错误答案按钮列表中
• 方案2：合并正确答案与错误答案，随机打乱顺序后渲染，避免每道题的正确答案始终处于首位

API返回的题目数据结构如下：

{
  "question": "The words  and originate from the languages of which country?", 
  "correctAnswer": "India", 
  "incorrectAnswers": ["Papua New Guinea", "Ethiopia", "China"]
}

现有代码 #

父组件代码

const [request, setRequest] = React.useState([])
 
React.useEffect(() => {
    fetch('https://opentdb.com/api.php?amount=5')
    .then(res => res.json())
    .then(data => setRequest(data.results.map(({ question, correct_answer, incorrect_answers }) => ({
        question, 
        correct_answer, 
        incorrect_answers
    }))))
}, [])

console.log(request)

const questionElements = request.map(req => {
    return (
        <Question 
            question={req.question}
            correct_answer={req.correct_answer}
            incorrect_answers={req.incorrect_answers}
            scoreFunction={scoreFunction}
            // disabled={disable}
        />
    )
})

Question组件代码

const incorrectAnswers = props.incorrect_answers.map(ans => {
    return (
        <button className="button">{ans}</button>
    )
})

return(
    <div className="question-div">
        <h1 className="question">{props.question}</h1>
        <div className="answerBlock">
            <button 
                disabled={disable}
                className="button correct"
                onClick={() => {
                    props.scoreFunction()
                    setDisable(true)
                }}
            >
                {props.correct_answer} 
            </button>
            {incorrectAnswers}
        </div>
        <hr />
    </div>
)

解决方案 #

方案2：合并后随机打乱（简洁推荐）

直接合并正确答案与错误答案为一个数组，随机打乱后统一渲染，逻辑更清晰。

修改Question组件代码：

// 合并所有答案
const allAnswers = [...props.incorrect_answers, props.correct_answer];

// Fisher-Yates洗牌算法，实现严谨的随机打乱
const shuffleArray = (array) => {
  const newArr = [...array];
  for (let i = newArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
  }
  return newArr;
};

const shuffledAnswers = shuffleArray(allAnswers);

// 渲染所有选项按钮
const answerButtons = shuffledAnswers.map(ans => {
    const isCorrect = ans === props.correct_answer;
    return (
        <button 
            className={`button ${isCorrect ? 'correct' : ''}`}
            disabled={disable}
            onClick={() => {
                if (isCorrect) props.scoreFunction();
                setDisable(true);
            }}
        >
            {ans}
        </button>
    )
})

return(
    <div className="question-div">
        <h1 className="question">{props.question}</h1>
        <div className="answerBlock">
            {answerButtons}
        </div>
        <hr />
    </div>
)

方案1：随机插入正确答案到错误答案列表

若需保留错误答案数组结构，仅将正确答案随机插入其中：

修改Question组件代码：

// 复制错误答案数组，避免修改原数据
const incorrectCopy = [...props.incorrect_answers];
// 生成0到错误答案数组长度之间的随机插入位置
const randomIndex = Math.floor(Math.random() * (incorrectCopy.length + 1));
// 插入正确答案到随机位置
incorrectCopy.splice(randomIndex, 0, props.correct_answer);

// 渲染所有按钮
const answerButtons = incorrectCopy.map(ans => {
    const isCorrect = ans === props.correct_answer;
    return (
        <button 
            className={`button ${isCorrect ? 'correct' : ''}`}
            disabled={disable}
            onClick={() => {
                if (isCorrect) props.scoreFunction();
                setDisable(true);
            }}
        >
            {ans}
        </button>
    )
})

return(
    <div className="question-div">
        <h1 className="question">{props.question}</h1>
        <div className="answerBlock">
            {answerButtons}
        </div>
        <hr />
    </div>
)

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