如何渲染对象内的对象数组反应本机？答案

【问题标题】：How to render array of objects inside an object react native?如何渲染对象内的对象数组反应本机？
【发布时间】：2020-12-09 00:21:07
【问题描述】：

这是我的 JSON：

{
"products": [
           {
               "_id": "5fc9027dd3b8f63398ae8132",
               "name": "Oriz 500g",
               "quantity": 1
           }
       ],
       "status": "CANCELLED",
       "total": 0,
}

我需要从产品中呈现名称和数量。我是这样渲染的，但它不起作用

<Text style={styles.listProduct}>{data.products.name}</Text>

注意：数据来自

const [data, setData] = useState([]);
const response = await axiosApiInstance.get(
      `/orders/get-order-details/5fce356c0fbc3605bffe2060`
    );
    setData(response.data);

【问题讨论】：

如果 products 有一个元素，您可以获取索引 0 处的元素：{data.products[0].name}
但是我会有更多的产品，有什么解决办法？

标签： javascript reactjs performance react-native firebase-realtime-database

【解决方案1】：

你需要在数组中循环并提取所需的数组项，按照这个

<View>
    {data.length > 0 && data.products.map((element, index) => {
      return (
        <View>
          <Text style={styles.listProduct}>Name: {element.name}</Text>
          <Text style={styles.listProduct}>Quantity: {element.quantity}</Text>
        </View>
      );
    })}
  </View>

根据您的要求修改

【讨论】：

TypeError: undefined is not an object (evalating 'data.products.map')
你能在状态中控制你的数据吗
他们进展顺利，只是在地图上它不起作用
编辑了我的答案，现在试试
出现同样的错误我不知道为什么没有获取数据

【解决方案2】：

这是答案的解决方案 const [data, setData] = useState({ products: [] });

````const products = data.products.map((item, i) => ({item.name}));```

并且在返回时你只是这样称呼它 {products}

【讨论】：