如何通过FlatList获取当前索引

Question

我正在用导航参数将数据传递到详细信息屏幕，一切正常，我唯一想将点击的当前级别索引传递到Object.entries[currentIndex]的是，我不知道如何才能得到

<FlatList
data={data}
keyExtractor={(item) => item.index}
renderItem={({ item, index }) => (
<View>
{item.sTask?.map((levels, i) => (
<View>
<TouchableOpacity
onPress={() => navigation.navigate('Tasks', { item })}
style={{
backgroundColor: '#33333325',
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 10,
marginVertical: 20,
marginHorizontal: 20,
}}
>
<Text>{Level 1}</Text>
</TouchableOpacity>

<TouchableOpacity>
{Another level...}
</TouchableOpacity>
</View>
))}
</View>
)}
/>

详细信息屏幕：

const [currentTaskGroupIndex, setCurrentTaskGroupIndex] = useState(0); <---- We need to set current index somehow to current clicked index
//Test item params data
useEffect(() => {
const mapData = item?.sTask?.map((tasks) => {
return Object.entries(tasks)[currentTaskGroupIndex].map((level) => {
// console.log(level);
});
});
}, [item]);

无论我点击哪个级别，我都会获得1级详细信息

Answer 1

您需要执行以下操作：

onPress={() => navigation.navigate('Tasks', { item:item, index:i })}

然后在详细信息屏幕中：

const indexParam = props?.route?.params?.index ?? 0
const [currentTaskGroupIndex, setCurrentTaskGroupIndex] = useState(indexParam); <---- We need to set current index somehow to current clicked index
//Test item params data
useEffect(() => {
const mapData = item?.sTask?.map((tasks) => {
return Object.entries(tasks)[currentTaskGroupIndex].map((level) => {
// console.log(level);
});
});
}, [item]);

希望能有所帮助。无需怀疑

Answer 2

您可以在导航参数中传递任务的索引

onPress={() => navigation.navigate('Tasks', { item, index: i })}

现在，你不需要map((来找到你的任务

const mapData = item?.sTask[index]

您可以在导航参数中传递整个对象

Answer 3

谢谢你们的回答，你们是对的，再加上我添加了另一个Object.key((.map，它起到了的作用

{item.sTask?.map((levels, i) => (
<View key={i}>
{Object.keys(levels).map((key, i) => (
<View key={i}>
{console.log(key)}
<TouchableOpacity
onPress={() =>
navigation.navigate('Tasks', { item: item, index: i })
}
style={{
backgroundColor: '#33333325',
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 10,
marginVertical: 20,
marginHorizontal: 20,
}}
>
<Text>{key}</Text>
</TouchableOpacity>
</View>
))}
```