Javascript 组件的重新招标使“传播”复选框保持选中状态“事件反应”

我有一个material 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>

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

   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));
    };

---

props.nextStep（“问题”）；line基本上调用外部函数来查看要渲染的视图。由于它有“问题”，它将呈现完全相同的视图。希望您能在这里帮助我。

React不建议在将

映射到组件时使用
索引
作为
键
。您的
问题
上似乎有
id
，请使用它

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

尝试使用onBlur而不是onChange。@bertdida OMG，这确实有效！！！妈的，我都快疯了8个小时了，谢谢你。你们能回答下面的问题吗？除了@bertdida所说的之外，React使用键来确定它是否应该重新渲染组件。在您的情况下-通过使用索引作为键并检查键是否已更改（未更改），React决定不重新呈现复选框。@nirshabi文档上的某个地方写了这个吗？我曾经经历过这个问题；从那时起，我就不再使用
索引
作为
键
。这是我从以下几行（来自文档）中得到的理解：“键有助于识别哪些项已更改、已添加或已删除。应将键赋予数组中的元素，以赋予元素一个稳定的标识。”，但可能我已经阅读或删除了它
   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));
    };