react native flatlist中有关props和renderItem的错误

Question

我在react native中创建一个简单的hello world类型项目，以便在开始我的第一个项目之前熟悉所有内容。

这个示例的目标是显示一个具有平面列表的数组，但关键是我要慢慢模块化它(即。数组存储在其他地方，flatlist使用renderitem, renderitem是一个单独的组件，等等)

import React, {useState} from 'react';
import {StyleSheet, Text, View, FlatList} from 'react-native';
function App () { 
const [orders, setOrders] = useState([
{ customer: 'Clair' , age: 45, item: 'Corn', key: 0},
{ customer: 'Alex' , age: 39, item: 'Tomato', key: 1},
]);

const renderer = ({order}) => 
{
const customerName = order.customer;
const itemName = order.item;
return(
<Text>I am {customerName} and I would like a {itemName} please</Text>
);
};

return( 
<View style={styles.container}>

<FlatList
data={orders}
renderItem={renderer}
keyExtractor={(order) => order.key}

/>

<Text> Hello World!!!! </Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
orderContainer:
{
borderColor: 'black',
borderWidth: 5,
padding: 20,
alignItems: 'center',
},
listText:
{
justifyContent: 'center',
alignItems: 'center',
}
});
export default App;

我学到的第一个愚蠢的错误是你不应该声明一个"组件"。(在本例中是渲染器)在应用程序 的主返回语句中现在我只需要把我的头围绕道具处理。这个错误特别与renderItem行有关。显然，prop，在我的理解中应该是useState数组中的一个命令，不存在

任何帮助都是感激的:)

Answer 1

对象渲染器获取如下:

item: Object
index : 0 
separators: Object

因此，要获得客户详细信息，您需要更新您的函数。

const renderer = ({item}) => 
{
const customerName = item.customer;
const itemName = item.item;
return(
<Text>I am {customerName} and I would like a {itemName} please</Text>
);
};