将数组的索引作为道具传递给React Native中的嵌套页面

Question

我是Javascript和React Native的新手，正在寻找最佳解决方案，提前感谢:)

关于我正在编程的内容的快速概述:这个特定的功能意味着访问我们的数据库并列出所有父对象并创建新对象(Program)，并将数据库中的所有属性附加到这个新实例"Program"然后，为了确保我们每次都列出所有的程序，即使添加了更多的程序，我们只需创建一个全局。数组包含所有这些"程序"把它们列在屏幕上。这个全局特性是为了让我在有了索引之后从子页面访问数组。

const programsRef = ref(getDatabase(), 'programs');
class Program {
constructor(name, description, inperson, online){
this.name = name;
this.description = description;
this.inperson = inperson;
this.online = online;
}
}
global.programList = []; //Converted to a global array to access items in array from other pages
get(programsRef).then(snapshot => {
snapshot.forEach(item => {
const temp = new Program(item.val().name, item.val().description, item.val().inperson, item.val().online);
programList.push(temp);
})
});

在React Native代码中，我们用。map() 来显示它

<View style={styles.middleContainer}>
<View>
<Text style={styles.heading}> Programs </Text>

{programList.map((item) =>
<View key={item.name}>
<Pressable onPress={() => navigation.navigate('COURSE', {
ID: item.name,
desc: item.description,
Index: {programList.findIndex(Program => {return Program.name === item.name;})},
})}>
<Text style={styles.bodyText}>{ item.name }</Text>
</Pressable>
</View>
)}
</View>
</View>

可以看到，在可压页中，我已经包含了将props传递给子页面。问题是我想把Program实例的索引传递给子进程但是像这样添加JavaScript会让编译器不高兴

index.js:1 ./Screens/Programs.js:79:33
Syntax error: Unexpected token, expected ","
77 |               ID: item.name,
78 |               desc: item.description,
> 79 |               Index: {programList.findIndex(Program => {return Program.name === item.name;})},
|                                  ^
80 |             })}>
81 |               <Text style={styles.bodyText}>{ item.name }</Text>
82 |             </Pressable>

我不知道如何说服编译器接受代码，而不是期望一个参数。什么好主意吗?

Answer 1

<View style={styles.middleContainer}>
<View>
<Text style={styles.heading}> Programs </Text>

{programList.map((item, index) => // added changes here
<View key={item.name}>
<Pressable onPress={() => navigation.navigate('COURSE', {
ID: item.name,
desc: item.description,
Index: index, // added changes here
})}>
<Text style={styles.bodyText}>{ item.name }</Text>
</Pressable>
</View>
)}
</View>
</View>