React Native FlatList添加成员id及点击跳转详情页问题

现存问题 #

• 目前使用数组索引作为FlatList列表项的key，当列表出现排序、增删操作时，会出现组件状态错位、渲染异常的问题，不属于稳定唯一标识
• 点击列表项跳转时没有携带当前成员的关联参数，详情页无法定位到要展示的对应成员数据
• 错误配置了listKey属性，该属性仅用于嵌套在其他滚动容器内的FlatList，顶层使用的FlatList不需要该属性

修复操作 #

1. 给成员数据添加稳定唯一ID #

在members数组的每个条目里增加独立的id字段，作为列表项的唯一标识，静态数据可手动赋值，接口拉取的业务数据一般会自带唯一主键：

const members = [
  { id: 1, receipt: "Receipt pts: RM1 = 3.00pts", membername: "Triple R Rewards Resource" , memberImage: StaticMemberListImage, receiptUpload: "Upload receipt"},
  { id: 2, receipt: "Receipt pts: RM1 = 1.00pts", membername: "Gwen Bridal Makeup", memberImage: StaticMemberListImage1, receiptUpload: "Upload receipt"},
  { id: 3, receipt: "Receipt pts: RM1 = 1.00pts", membername: "KV Physiotheraphy", memberImage: StaticMemberListImage2, receiptUpload: "Upload receipt"},
  { id: 4, receipt: "Receipt pts: RM1 = 5.00pts", membername: "LDSV Ventura Enterprise", memberImage: StaticMemberListImage3, receiptUpload: "Upload receipt"},
  { id: 5, receipt: "Receipt pts: RM1 = 1.00pts", membername: "May Kuen Heals", memberImage: StaticMemberListImage4, receiptUpload: "Upload receipt"},
  { id: 6, receipt: "Receipt pts: RM1 = 1.00pts", membername: "Amarjit Sran Trading", memberImage: StaticMemberListImage5, receiptUpload: "Upload receipt"},
];

2. 修正FlatList配置 #

移除无效的listKey属性，将keyExtractor改为读取条目自身的id作为唯一key，同时在点击回调里传入当前成员的参数：

export const MemberCell = () => {
    const navigation = useNavigation();
    return (
        <FlatList 
        numColumns={2}
        data={members}
        // 用条目自身唯一id作为key，不依赖数组索引
        keyExtractor={(item) => item.id.toString()}
        renderItem={ ( { item } ) => (<Member member={item}
            onClick={()=> {
              // 跳转时携带当前成员的id，也可以直接传完整member对象
              navigation.navigate("MemberDetails", {
                memberId: item.id
              });
            }} 
            onUploadClick={()=>{
              // 上传小票页同理可以传对应成员id
              navigation.navigate("UploadReceipt", {
                memberId: item.id
              })
            }}/>
          )}
        />
    );
}

3. 详情页读取路由参数 #

在MemberDetails页面中，通过useRoute钩子拿到传递过来的成员id，匹配对应成员数据渲染即可：

import { useRoute } from '@react-navigation/native';
// 建议把members数组抽到单独的常量文件里导出，方便多页面复用
const MemberDetails = () => {
  const route = useRoute();
  const { memberId } = route.params;
  // 匹配当前点击的成员数据
  const currentMember = members.find(item => item.id === memberId);

  // 后续直接用currentMember渲染详情内容即可
  return (
    // 详情页业务组件代码
  )
}

注意：如果后续成员数据从后端接口获取，直接使用后端返回的唯一主键（比如member_id、user_id）作为id字段值即可，不需要手动生成。

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