React循环渲染多Toggle类型CustomField组件状态异常求助

核心原因 #

循环渲染React组件时未指定唯一key，导致React无法区分不同组件实例，复用了组件状态，引发第二个组件状态不生效的问题。

修复步骤 #

1. 给循环渲染的组件添加唯一key #

修改循环渲染的代码，将每个customField的id作为key（需确保id在列表中唯一）：

{customFields.map((p) => <CustomField key={p.id} parentKey='customFields' {...p} />)}

2. （可选优化）给Checkbox设置唯一name #

为避免DOM元素的name属性重复，可给每个Checkbox的name加上组件id后缀：

<Checkbox name={`toggleCheck-${id}`} onClick={(e) => { setIsCheckboxClicked(!isCheckboxClicked); }}>
  <Body>{label}</Body>
</Checkbox>

原理说明 #

React通过key来跟踪列表中每个组件的身份，没有唯一key时，React会采用“就地更新”的策略，可能复用之前的组件实例及其状态，导致多个组件共享状态或者状态更新异常。添加唯一key后，React能正确识别每个组件实例，确保每个CustomField的isCheckboxClicked状态独立维护。

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