在 React Native Flatlist 中渲染对象数组答案

【问题标题】：Render Array of Objects in React Native Flatlist在 React Native Flatlist 中渲染对象数组
【发布时间】：2021-08-24 10:32:48
【问题描述】：

我目前无法将一组对象渲染到我的 react 本机平面列表中。

这是我的数组：

const item = [
{
  "id": 59,
  "id_order": Object {
    "created": "23/08/2021 16:37:55",
    "direccion_extra": "codigo: 0592",
    "id": 39,
    "id_cliente": 35,
    "monto_pago_efectivo": null,
    "status": 1,
    "tipo_pago": 2,
  },
},
{
  "id": 58,
  "id_order": Object {
    "created": "23/08/2021 16:37:55",
    "direccion_extra": "codigo: 0592",
    "id": 39,
    "id_cliente": 35,
    "monto_pago_efectivo": null,
    "status": 1,
    "tipo_pago": 2,
  },
},
]

这是我要渲染的平面列表：

<FlatList
    data={item}
    renderItem={({ itemProduct, index }) => <ProductCard item={{itemProduct}} />}}
    keyExtractor={(item, index) => index.toString()}
/>

但是，我无法接收 ProductCard 组件中的每个数组对象。任何想法表示赞赏！

【问题讨论】：

标签： react-native

【解决方案1】：

renderItem 函数中没有itemProduct。它被称为item(FYR)。

你可以重命名它

    renderItem={({ item: itemProduct, index })

顺便说一句，<ProductCard item={{itemProduct}} /> 应该只使用一个 {}，除非您希望它被包装在一个对象中。

【讨论】：

【解决方案2】：

项目数组

const items = [
  {
    id: 59,
    id_order: {
      created: '23/08/2021 16:37:55',
      direccion_extra: 'codigo: 0592',
      id: 39,
      id_cliente: 35,
      monto_pago_efectivo: null,
      status: 1,
      tipo_pago: 2,
    },
  },
  {
    id: 58,
    id_order: {
      created: '23/08/2021 16:37:55',
      direccion_extra: 'codigo: 0592',
      id: 39,
      id_cliente: 35,
      monto_pago_efectivo: null,
      status: 1,
      tipo_pago: 2,
    },
  },
];

平面列表

     <FlatList
        data={items}
        renderItem={({ item }) => ( 
          <View>
            <Text>{item.id}</Text>
          </View>
        )}
        keyExtractor={(item) => item.id}
      />

注意：

在 FlatList renderItem 你不能写 itemProduct 你必须把它写成 item

【讨论】：