React中Radio buttons未按预期渲染 如何设置默认选中项

• 单选框重复渲染：你在每个选项的遍历逻辑中嵌套了correctAnswers数组的遍历，correctAnswers共5条数据，所以每个选项会被重复渲染5次，直接导致界面显示异常。
• 匹配规则错误：你直接用correct === answer做判断，其中correct是包含question、answers属性的对象，answer是字符串，二者永远不可能相等，所以checked属性永远不会生效。
• 匹配逻辑冗余：不需要遍历全部正确答案，只需找到当前问题对应的正确答案，和当前选项对比即可。
• 存在id重复风险：不同问题的选项如果值相同，会出现id属性重复，导致label点击关联错误。

import React, { Component } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state={
            qanda:[
                {question:'Where do you want to travel?', answers:['USA', 'UK', 'China', 'Japan', 'Canada']},
                {question:'What is your favourite food?', answers:['Pizza', 'Burger', 'Sushi']},
                {question:'What is your favorite soda drink?', answers:['Pepsi', 'Coke', 'Sprite', '7Up']},
                {question:'Who do you bank with?', answers:['Bank of America', 'Capital One Bank', 'TD Bank', 'Chase']},
                {question:'What is your current status', answers:['Single', 'Married', 'Divorced']}
            ],
            correctAnswers:[
                {question:'Where do you want to travel?', answers:'USA'},
                {question:'What is your favourite food?', answers:'Burger'},
                {question:'What is your favorite soda drink?', answers:'Sprite'},
                {question:'Who do you bank with?', answers:'Capital One Bank'},
                {question:'What is your current status', answers:'Single'}
            ]
        }
        // 提前把正确答案转成映射表，提升查找效率
        this.correctMap = Object.fromEntries(
            this.state.correctAnswers.map(item => [item.question, item.answers])
        )
    }

    render() {
        return (
            <>
                {this.state.qanda.map((qanda, qIndex)=>{
                    const currentCorrect = this.correctMap[qanda.question];
                    return(
                        <div key={qIndex}>
                            <h3>{qanda.question}</h3>
                            {qanda.answers.map((answer, aIndex)=>{
                                // 拼接唯一id，避免重复
                                const uniqueId = `q${qIndex}_a${aIndex}`;
                                return (
                                    <div key={uniqueId}>
                                        <input 
                                            type='radio' 
                                            id={uniqueId} 
                                            value={answer} 
                                            name={qanda.question} 
                                            checked={answer === currentCorrect}
                                            // 如果需要作为受控组件使用，补充onChange事件更新对应state即可
                                            onChange={() => {}}
                                        />
                                        <label htmlFor={uniqueId}>{answer}</label>
                                    </div>
                                )
                            })}
                        </div>
                    )
                })}
            </>
        )
    }
}

export default App;

如果不需要做受控组件，只需要默认选中效果，也可以把checked属性替换为defaultChecked，不需要额外写空的onChange事件。

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