解析JSON在React Native中

Question

我目前正在使用Google Firebase Firestore作为REST API。我觉得我缺少一些基本的东西，因为我很难显示数据。我希望该应用显示所有库存或选定的库存。提前致谢！

通过Postman返回的数据显示为：

{
    "documents": [
        {
            "name": "<my_url>",
            "fields": {
                "l": {
                    "integerValue": "5"
                },
                "s": {
                    "integerValue": "11"
                },
                "m": {
                    "integerValue": "15"
                },
                "xs": {
                    "integerValue": "4"
                },
                "xl": {
                    "integerValue": "4"
                },
                "ml": {
                    "integerValue": "13"
                }
            },
            "createTime": "2021-11-03T16:39:02.531749Z",
            "updateTime": "2021-11-03T16:43:31.538505Z"
        },
        {
            "name": "<my_url>",
            "fields": {
                "6": {
                    "integerValue": "5"
                },
                "5": {
                    "integerValue": "6"
                },
                "8": {
                    "integerValue": "5"
                },
                "7": {
                    "integerValue": "7"
                }
            },
            "createTime": "2021-11-03T16:39:08.991738Z",
            "updateTime": "2021-11-03T16:44:15.257036Z"
        },
        {
            "name": "<my_url>",
            "fields": {
                "s": {
                    "integerValue": "10"
                },
                "l": {
                    "integerValue": "7"
                },
                "xl": {
                    "integerValue": "6"
                },
                "m": {
                    "integerValue": "8"
                },
                "xxl": {
                    "integerValue": "1"
                },
                "xs": {
                    "integerValue": "2"
                }
            },
            "createTime": "2021-11-03T16:38:34.533204Z",
            "updateTime": "2021-11-03T16:45:51.907403Z"
        },
        {
            "name": "<my_url>",
            "fields": {
                "xxl": {
                    "integerValue": "1"
                },
                "l": {
                    "integerValue": "5"
                },
                "xl": {
                    "integerValue": "5"
                },
                "s": {
                    "integerValue": "8"
                },
                "xs": {
                    "integerValue": "1"
                },
                "m": {
                    "integerValue": "5"
                }
            },
            "createTime": "2021-11-03T16:39:45.818467Z",
            "updateTime": "2021-11-03T16:46:40.872011Z"
        }
    ]
}

我正在获取数据：

const getAllInventory = async () => {
        const url = `https://firestore.googleapis.com/v1/projects/<my_url>`;
        const response = await fetch(url);
        const items = await response.json();

        console.log(response.ok);
        console.log(response.status);

        setInventoryArray([items]);
    };

我试图：

• 将状态设置为objects.entries。 （项目）这允许以下映射在没有错误的情况下运行，但我无法正确显示数据
• {intectoryArray.map（（（Object，i）=＆gt; {＆lt; {＆lt; text; text key = = {i}＆gt; test {object [0]}＆lt;/text＆gt;;;}}

关于如何正确显示的任何建议将不胜感激！

全视图以获取进一步的上下文：

import React from "react";
import { useState, useEffect } from "react";
import { Text, View, Button, StyleSheet } from "react-native";

const InventoryMain = (props) => {
    const [inventoryArray, setInventoryArray] = useState([]);

    useEffect(() => {
        getAllInventory();
    }, []);

    useEffect(() => {
        console.log(inventoryArray);
    }, [inventoryArray]);

    const getAllInventory = async () => {
        const url = `https://firestore.googleapis.com/v1/projects/<my_url>`;
        const response = await fetch(url);
        const items = await response.json();

        console.log(response.ok);
        console.log(response.status);

        setInventoryArray(items);
    };

    if (inventoryArray.length === 0) {
        return <Text>loading...</Text>;
    }
    return (
        <View style={styles.container}>
            <Text>company wide inventory</Text>

            {inventoryArray.map((object, i) => {
                <Text key={i}> test{object[0]}</Text>;
            })}

            <Text></Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

export default InventoryMain;

Answer 1

我认为我不完全理解您要做什么，但是有几件事对我来说看起来很奇怪。

首先，等待响应。代码>而不是数组。尝试做setInventoryArray（items.documents）;。

另一方面，使用调试器或添加Console.log的错误很容易调试。

另外，如果您尝试将复杂的对象转换为字符串，我建议使用json.stringify（Object）。