英文:
React native error undefined is not an object (evaluating 'prod.title')
问题
以下是您要翻译的内容：
"我在尝试运行这段代码时遇到了这个错误。我已经设置了产品变量。我能知道为什么会出现这个错误吗？
)}
keyExtractor={(prod,index) => {
return prod._id
}}
/>
英文:
I'm getting this error when I try to run this code. I have set the products variable as well. Can I know why this error occurs?
<View style={styles.prodCont}>
<ScrollView horizontal={true} style={{ width: "100%" }}>
<FlatList
data={products}
renderItem={({prod}) => (
<ProductCard
cardType="social"
title={prod.title}
imageUrl={prod.imageUrl}
price={prod.price}
unit={prod.unit}
overallRating={prod.overallRating}
likes={prod.likes}
userID={route.params.userEmail}
/>
)}
keyExtractor={(prod,index) => {
return prod._id
}}
/>
</ScrollView>
</View>
答案1
得分: 0
The object passed to the renderItem function has the following properties:
renderItem({
item: ItemT, // 项目
index: number, // 索引
separators: {
highlight: () => void, // 高亮
unhighlight: () => void, // 取消高亮
updateProps: (select: 'leading' | 'trailing', newProps: any) => void, // 更新属性
}
}): JSX.Element;
In other words, the product is in the item property. Your current code attempts to destructure a property named prod, which doesn't exist.
FlatList renderItem property docs
Unrelated
IMO the ProductCard usage should look closer to this:
<ProductCard
cardType="social"
product={item}
userID={route.params.userEmail}
/>
There's no (good) reason to force passing each product property separately. You could allow optional properties in case you want to override the values in the product itself, though.
英文:
The object passed to the renderItem function has the following properties:
renderItem({
item: ItemT,
index: number,
separators: {
highlight: () => void;
unhighlight: () => void;
updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
}
}): JSX.Element;
In other words, the product is in the item property. Your current code attempts to destructure a property named prod, which doesn't exist.
FlatList renderItem property docs
Unrelated
IMO the ProductCard usage should look closer to this:
<ProductCard
cardType="social"
product={item}
userID={route.params.userEmail}
/>
There's no (good) reason to force passing each product property separately. You could allow optional properties in case you want to override the values in the product itself, though.
答案2
得分: 0
FlatList的renderItem函数传递一个带有item属性的参数，表示列表中的一个项目。此外，我认为不需要在FlatList中使用ScrollView，因为FlatList具有horizontal属性，请尝试切换到以下代码：
<View style={styles.prodCont}>
<FlatList
horizontal
data={products}
renderItem={({ item }) => (
<ProductCard
cardType="social"
title={item.title}
imageUrl={item.imageUrl}
price={item.price}
unit={item.unit}
overallRating={item.overallRating}
likes={item.likes}
userID={route.params.userEmail}
/>
)}
keyExtractor={(prod,index) => prod._id}
/>
</View>
英文:
the function renderItem of FlatList passes a parameter with an item attribute, representing an item in the list, and also I believe you don't need the ScrollView with FlatList, as FlatList has the horizontal attribute, try switching to this code:
<View style={styles.prodCont}>
<FlatList
horizontal
data={products}
renderItem={({ item }) => (
<ProductCard
cardType="social"
title={item.title}
imageUrl={item.imageUrl}
price={item.price}
unit={item.unit}
overallRating={item.overallRating}
likes={item.likes}
userID={route.params.userEmail}
/>
)}
keyExtractor={(prod,index) => prod._id}
/>
</View>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论