React/React Native中FlatList/map渲染子组件状态更新异常问题

问题场景 #

父组件通过FlatList渲染Item子组件时，将keyExtractor设置为使用index作为唯一标识；子组件Item内部通过useState基于传入的item.status初始化isChecked状态，但交互时Checkbox的选中、禁用状态无法同步更新。

解决方案 #

将FlatList的keyExtractor替换为item自身的唯一标识（例如item.id）：

// 修改前
<FlatList
  data={data}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item}) => <Item item={item} />}
/>

// 修改后
<FlatList
  data={data}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({item}) => <Item item={item} />}
/>

原因说明 #

使用index作为key时，当列表数据发生变更（如排序、增删条目），React会复用原有组件实例，导致子组件内部的useState不会基于新的item.status重新初始化，进而出现状态与数据不同步的问题。改用item的唯一标识作为key，能确保每个子组件实例与对应的数据项绑定，数据变更时组件会正确重新渲染并初始化状态。

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