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

Question

我正在使用 React Native 制作一个简单的 hello world 类型的项目，以便在我开始第一个项目之前熟悉所有内容。

这个的目标是显示一个带有平面列表的数组，但更重要的是我要慢慢地将它模块化（即数组存储在其他地方，平面列表使用 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;

我学到的第一个虚拟错误是你不应该在应用程序的主要 return 语句中声明一个“组件”（在本例中是渲染器）

现在我只需要全神贯注于道具处理。该错误特别与 renderItem 行有关。显然，根据我的理解应该是 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>
      );
    };

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

Error relating to props and renderItem in react native flatlist

reactjs

react-native

arrow-functions

react-props