React映射数组传Props给Modal时值错误的问题排查与修复

违反的React规则 #

• 使用数组索引作为组件key：React依赖key识别列表中每个组件的唯一身份，索引是不稳定的——当数组元素增删、排序变化时，索引会随之改变，导致React错误复用组件实例，组件内部的状态和props无法与对应数据项正确绑定，最终出现数据混乱。
• 未隔离列表项的Modal状态：如果用单个布尔值（比如updateStatus）控制所有列表项的Modal显示，会导致所有Modal共享同一状态。触发显示时，React重渲染后，最后一个列表项的order会覆盖之前的，因组件复用或状态共享，导致Modal拿到错误数据。

修复方法 #

1. 替换索引为唯一稳定的key #

使用数据项自身的唯一标识（比如订单ID、产品ID）作为key，确保每个组件实例的身份不随数组变化而改变，React能准确区分并更新对应组件。

原代码：

{pendingOrders?.map((order, index) => (
  <Accordion key={index}>
    {/* 内容 */}
  </Accordion>
))}

修改后：

{pendingOrders?.map((order) => (
  <Accordion key={order.id}> {/* 用订单唯一ID作为key */}
    {/* 内容 */}
  </Accordion>
))}

2. 隔离每个列表项的Modal状态 #

不要用单个布尔值控制所有Modal，改用存储当前打开Modal对应数据项的ID，通过ID匹配控制对应Modal的显示，确保每个Modal只和自身对应的数据项绑定。

原代码：

const [updateStatus, setUpdateStatus] = useState(false);

// 打开Modal按钮
<button onClick={() => setUpdateStatus(true)}>修改订单状态</button>

// Modal渲染
{updateStatus && <UpdateOrderStatusModal {...{ order }} />}

修改后：

const [openModalOrderId, setOpenModalOrderId] = useState(null);

// 打开Modal按钮
<button onClick={() => setOpenModalOrderId(order.id)}>修改订单状态</button>

// Modal渲染
{openModalOrderId === order.id && <UpdateOrderStatusModal {...{ order }} />}

这样修改后，每个Modal的显示状态与对应订单绑定，不会出现数据串位问题，同时React能正确识别每个列表项组件，避免复用错误。

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