Javascript 选择时重复无线电输入（React）

我正在尝试使用代码笔上的react制作一个单问题测验应用程序。我正在使用api获取一个问题、3个错误答案和一个正确答案，并将其添加到状态。我在验证答案时遇到问题。单击4个选项中的一个后，我想有条件地渲染一个带有结果的div。但问题是，在显示结果后，会呈现另一个无线电输入

const approt=document.getElementById（'app'）；
类应用程序扩展了React.Component{
陈述={
问题：''，
正确：“”，
不正确：[]，
结果：空
}
componentDidMount（）{
axios.get（）https://opentdb.com/api.php?amount=1&type=multiple')
。然后（res=>{
const data=res.data.results[0]；
const q=data.question；
const correct=data.correct\u答案；
常数不正确=数据。回答不正确；
this.setState（{问题：q，正确：正确，错误：错误}）
})
}
评估（选定）{
if（selected==this.state.correct）{
this.setState（{result:'Correct！'}）
}否则{
this.setState（{result:`错误！正确答案是${this.state.Correct}}）
}
}
render（）{
const random=Math.floor（Math.random（）*3）；
const options=this.state.incorrect；
选项.splice（随机，0，此.state.correct）；
const choices=options.map（（选项，i）=>(
this.evaluate（选项）}/>
{option}
) )
返回(
{this.state.problem}
{选择}
{this.state.result}
)
}
}
ReactDOM.render（，approt）

---

这似乎是一个诚实的错误（我一直为此感到内疚）：

在

render

方法中，可以修改数组：

const options = this.state.incorrect;
options.splice(random, 0, this.state.correct);

我想你想要的是：

const options = this.state.incorrect.slice(); //create a COPY of the array
options.splice(random, 0, this.state.correct);

React基本上是一个状态机，它查找状态的更改并智能地更新依赖于该状态的部件。但它只是JavaScript。通过直接拼接状态对象，可以更改渲染方法中的状态。React不知道您更改了状态，因此，您最终会出现意外行为——特别是频繁调用

render

我复制了您的代码片段，以便您可以看到一个工作示例

const approt=document.getElementById（'app'）；
类应用程序扩展了React.Component{
陈述={
问题：''，
正确：“”，
不正确：[]，
结果：空
}
componentDidMount（）{
axios.get（）https://opentdb.com/api.php?amount=1&type=multiple')
。然后（res=>{
const data=res.data.results[0]；
const q=data.question；
const correct=data.correct\u答案；
常数不正确=数据。回答不正确；
this.setState（{问题：q，正确：正确，错误：错误}）
})
}
评估（选定）{
if（selected==this.state.correct）{
this.setState（{result:'Correct！'}）
}否则{
this.setState（{result:`错误！正确答案是${this.state.Correct}}）
}
}
render（）{
const random=Math.floor（Math.random（）*3）；
const options=this.state.error.slice（）；
选项.splice（随机，0，此.state.correct）；
const choices=options.map（（选项，i）=>(
this.evaluate（选项）}/>
{option}
) )
返回(
{this.state.problem}
{选择}
{this.state.result}
)
}
}
ReactDOM.render（，approt）