React Native导航传参后Attendance.js卡片重复展示同ID数据求助

问题根源分析 #

• Radio.js里错误地通过循环多次触发页面跳转，每次仅传递单个item，最终只有最后一个item被传递到Attendance页面；逻辑上应该传递所有符合筛选条件的item数组，而非单个item。
• Attendance.js中map遍历未接收当前item参数，且使用的data不是导航传递的目标数据，同时缺少唯一key属性导致渲染异常。

修复代码 #

1. 修正Radio.js的跳转逻辑 #

改用filter筛选符合条件的所有item，一次性传递整个数组：

onRadioBtnClick = () => {
  // 筛选出attendanceType匹配的所有item
  const filteredItems = data.filter(item => item.attendanceType === checked);
  // 将筛选后的数组传递到Attendance页面
  navigation.navigate('attendance', { items: filteredItems });
};

2. 修正Attendance.js的渲染逻辑 #

从导航参数中获取传递的items数组，遍历每个item并添加唯一key：

// 从路由参数中取出传递的items数组
const { items } = route.params;

return (
  <ScrollView>
    {items.map((item) => (
      <View key={item.id} style={styles.view} > {/* 添加基于item.id的唯一key */}
        <Card style={styles.cardWrapper} >
          <View style={styles.card}>
            <Text style={styles.title}>
              Key:{item.id} {'\n'} 
              Latitude:{item.latitude} {'\n'} 
              Longitude:{item.longitude}{'\n'}
              Attendance Time:{item.attendanceTime} {'\n'} 
              Attendance:{`${item.attendanceType}`}
              {item.attendanceType === "i" ? (
                <Image style={styles.icon} source={require('../assests/checked.png')} />
              ) : (
                <Image style={styles.icon} source={require('../assests/delete.png')} />
              )}
              {'\n'}
              Employee Name: {item.userInfo.displayName} 
            </Text>
          </View>
        </Card>
      </View>
    ))}
  </ScrollView>
);

核心修复点总结 #

• Radio.js：用filter替代map完成数据筛选，一次性传递整个符合条件的数组，避免多次跳转覆盖参数。
• Attendance.js：从路由参数中读取目标数组，遍历过程中接收当前item，给每个列表项添加唯一key，确保React能正确区分不同元素，消除重复渲染问题。

内容的提问来源于stack exchange，提问作者Adeel Memon PK