组件的ReRendering保持传播复选框选中的事件React

Question

我有一个素材ui复选框formgroup，我正在根据从API接收的数据动态呈现它。基本上，用户收到一个带有一组答案的问题。他检查所有有效的答案，然后单击"下一步"。如果服务器发送了另一个问题，则加载新问题，依此类推。问题是，在第一次尝试时，如果用户只选中第一个复选框，然后单击"下一个"，则下一个加载的答案已经选中了第一个复选格！任何订单都一样。对此有什么想法吗？这是代码：

<FormControl component="fieldset" className={classes.formControl}>
<button onClick={()=>{console.log(answers)}}>PUSSY</button>
<FormLabel component="legend">{state.question.text}</FormLabel>
<FormGroup>
{state.question.items.map((question,index)=>{
return(
<FormControlLabel
key={index}
control={<Checkbox disableRipple={true} defaultChecked={false}  onChange={handleChangeMultiple} name={question.id}/>}
label={question.name}
/>
)
})
}
</FormGroup>
</FormControl>

以下是onchange处理程序：

const handleChangeMultiple = (e)=>{
if(e.target.checked) {
setAnswers([...answers, e.target.name]);
}
}

最后是下一个按钮处理程序：

const yesGroupMultipleNext = async e => {
e.preventDefault();
answers.map(answer=>{
let obj = {};
obj.id = answer;
obj.choice_id = 'present';
evidence.push(obj);
});
setAnswers([]);
await makeDiagnosis(evidence)
.then(res=>{
console.log(res)
dispatch({type:'SET_RESPONSE',payload:res.data});
if(res.data.question.type === 'group_single' || res.data.question.type === 'group_multiple' || res.data.question.type === 'single' ){
console.log('new instance')
props.nextStep('questions');
}
})
.catch(err=>console.log(err));
};

道具。nextStep("问题"(；line基本上调用一个外部函数来查看要渲染的视图。既然它有"问题"，它将呈现完全相同的视图。希望你能在这里帮我。

Answer 1

React不建议在组件中使用map时将index用作key。您的questions上似乎有ids，请使用它。

如果项的顺序可能发生变化，我们不建议对键使用索引。这可能会对性能产生负面影响，可能会导致组件状态出现问题。

单据