如何通过FlatList获取当前索引并传递至详情页？

1. 在列表页传递点击的层级索引 #

修改FlatList中TouchableOpacity的onPress事件，将当前点击的层级索引（即item.sTask.map循环里的i）与原有数据一起传递给详情页：

<FlatList
  data={data}
  keyExtractor={(item) => item.index}
  renderItem={({ item, index }) => (
    <View>
      {item.sTask?.map((levels, i) => (
        <View key={i}>
          <TouchableOpacity
            onPress={() => navigation.navigate('Tasks', { 
              item,
              selectedLevelIndex: i // 传递当前点击的层级索引
            })}
            style={{
              backgroundColor: '#33333325',
              paddingHorizontal: 20,
              paddingVertical: 10,
              borderRadius: 10,
              marginVertical: 20,
              marginHorizontal: 20,
            }}
          >
            <Text>{`Level ${i+1}`}</Text>
          </TouchableOpacity>
         
          <TouchableOpacity onPress={() => navigation.navigate('Tasks', {
            item,
            selectedLevelIndex: 这里替换为该层级对应的索引变量
          })}>
            {`Another level...`}
          </TouchableOpacity>
        </View>
      ))}
    </View>
  )}
/>

2. 在详情页接收并使用索引 #

从导航参数中取出传递的索引，用它初始化状态，同时调整useEffect依赖项确保状态变化时重新处理数据：

const { item, selectedLevelIndex } = route.params;

// 用传递的索引初始化状态
const [currentTaskGroupIndex, setCurrentTaskGroupIndex] = useState(selectedLevelIndex);

// 测试参数数据
useEffect(() => {
  const mapData = item?.sTask?.map((tasks) => {
    // 加上可选链避免索引越界时报错
    return Object.entries(tasks)[currentTaskGroupIndex]?.map((level) => {
      console.log(level);
      // 这里处理层级数据逻辑
    });
  });
}, [item, currentTaskGroupIndex]); // 新增状态到依赖，状态变化时重新执行

关键提示 #

• 给item.sTask.map生成的每个子View添加唯一key，避免React渲染警告。
• 若有多个层级的TouchableOpacity，需给每个层级传递对应循环变量作为索引（比如第二个层级用嵌套循环的j）。
• 使用?.可选链处理Object.entries(tasks)[currentTaskGroupIndex]，防止索引超出数组长度导致报错。

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