如何获取和呈现这些数据?typescript接口(react-native)

uqdfh47h  于 2023-08-07  发布在  React
关注(0)|答案(1)|浏览(83)

我有这些接口:

interface Product {
  id: string;
  name: string;
  price: string;
}

interface OrderItems {
  id: string;
  product: Product[];
}

interface Order {
  id: string;
  phone: string;
  email: string;
  orderItems: OrderItems[]
};

字符串
对于我从个人API获取的数据:

{
  "id": "...",
  "phone": "0012025550150",
  "email": "somebody@domain.coms",
  "orderItems": [
    {
      "id": "...",
      "product": {
        "id": "...",
        "name": "Test product",
        "price": "14.55"
      }
    },
    {
      "id": "...",
      "product": {
        "id": "...",
        "name": "Test product 2",
        "price": "9.99"
      }
    }
  ]
}


我应该如何调用product.name此信息旁边的render www.example.com和.price?:

<FlatList
  data={data}
  keyExtractor={({id}) => id}
  renderItem={({item}) => (
    <Text>
      item.phone}, {item.email}, Products: // here
    </Text>
  )}
/>


我没有线索,因为我是一个新手在React和打字,如果你们能帮助它将是非常感激

zf2sa74q

zf2sa74q1#

如果你的数据是.orderItems,你只需要放入data={data},然后执行以下代码片段:

<FlatList
      data={data}
      renderItem={item => (
        <Text>
          Products: {item.product.name} {item.product.price}
        </Text>
      )}
    />

字符串

相关问题