React中Radio Input更新状态时无法选中的问题排查

你的问题核心出在初始状态结构错误和单选框未设置受控属性，附带一些可优化的逻辑细节，下面是具体修复步骤：

1. 修正用户选择的初始状态 #

你把userSelections初始化为数组包裹的对象，但实际只需要一个普通对象存储每道题的选择。数组结构会导致状态更新时出现嵌套异常，直接改为对象即可：

const [userSelections, setUserSelections] = useState({
    question1: "",
    question2: "",
    question3: "",
    question4: "",
    question5: "",
});

2. 给单选框添加checked属性实现受控 #

单选框需要通过checked属性绑定状态，否则状态更新后UI不会同步选中状态。在<input>标签中添加：

checked={userSelections[questionNumber] === choice}

当userSelections中对应题目的值等于当前选项时，单选框会自动显示选中状态。

3. 优化题目数据处理逻辑 #

• 无需在map中用data.find查找当前题目，map的回调参数本身就是当前题目对象
• 不要直接修改原数据data[index].id，渲染时直接用index作为标识即可
• 修正随机排序逻辑，原写法sort(() => Math.random() - 0, 5)无效，改为sort(() => Math.random() - 0.5)

修复后的完整<Question />组件代码 #

import { useState } from "react";
import { nanoid } from "nanoid";

export default function Question({ data }) {
    const [userSelections, setUserSelections] = useState({
        question1: "",
        question2: "",
        question3: "",
        question4: "",
        question5: "",
    });
    
    function handleQuestion(event) {
        const { name, value } = event.target
        setUserSelections(prevState => ({
            ...prevState,
            [name]: value,
        }))
    }
    
    return (
        <div className="quiz--container">
            {data.map((item, index) => {
                const currentIndex = index;
                const questionNumber = `question${currentIndex + 1}`;
                const allChoices = [...item.incorrect_answers, item.correct_answer]
                    .sort(() => Math.random() - 0.5);
                
                return (
                    <div key={index} className="question--container">
                        <p className="question">
                            {item.question.replace(/&quot;/g, '"').replace(/&#039;/g, "'")}
                        </p>
                        <form className="choices--container" key={nanoid()}>
                            {allChoices.map((choice, idx) => {
                                const optionNumber = `Option${idx + 1}`;
                                const inputId = `${questionNumber}${optionNumber}`;
                                
                                return (
                                    <div className="choice" key={idx}>
                                        <input 
                                            type="radio" 
                                            id={inputId}
                                            name={questionNumber}
                                            value={choice}
                                            onChange={handleQuestion}
                                            checked={userSelections[questionNumber] === choice}
                                        />
                                        <label className={`choice--label`} htmlFor={inputId}>
                                            {choice}
                                        </label>
                                    </div>
                                )
                            })}
                        </form>
                    </div>
                );
            })}
        </div>
    );
}

修复后单选框可以正常勾选，状态更新会同步UI，也不会出现状态嵌套异常。后续你可以通过userSelections对象和data中的correct_answer对比，计算用户得分。

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