在反应中无法显示从 api 收到的不同 json 数据

Question

我正在尝试显示从 api 收到的 json 数据。 但是 json 内部的数组长度和 json 数据的标签是不固定的。 对于某些 json 响应，我没有任何问题，但是当数组或标签的长度发生更改时，我收到“未处理的拒绝（TypeError）：无法读取未定义的属性“开始”（匿名函数）”我想要的是显示整个数据并忽略数据为 null 的标签。

{
    "time": 3,
    "annotations": [
        {
            "start": 4,
            "end": 13,
            "spot": "Mona Lisa",
            "confidence": 0.8905,
            "id": 70889,
            "title": "Mona Lisa",
            "uri": "http://en.wikipedia.org/wiki/Mona_Lisa",
            "label": "Mona Lisa"
        },
        {
            "start": 32,
            "end": 44,
            "spot": "oil painting",
            "confidence": 0.8167,
            "id": 22605,
            "title": "Oil painting",
            "uri": "http://en.wikipedia.org/wiki/Oil_painting",
            "label": "Oil painting"
        },
        {
            "start": 56,
            "end": 64,
            "spot": "Leonardo",
            "confidence": 0.7723,
            "id": 18079,
            "title": "Leonardo da Vinci",
            "uri": "http://en.wikipedia.org/wiki/Leonardo_da_Vinci",
            "label": "Leonardo da Vinci"
        },
        {
            "start": 83,
            "end": 89,
            "spot": "Louvre",
            "confidence": 0.8942,
            "id": 17546,
            "title": "Louvre",
            "uri": "http://en.wikipedia.org/wiki/Louvre",
            "label": "Louvre"
        },
        {
            "start": 93,
            "end": 98,
            "spot": "Paris",
            "confidence": 0.7777,
            "id": 22989,
            "title": "Paris",
            "uri": "http://en.wikipedia.org/wiki/Paris",
            "label": "Paris"
        }
    ],
    "lang": "en",
    "langConfidence": 1.0,
    "timestamp": "2019-11-20T07:27:47.008"
}

---

QUERY 2：NASA成立于1958年。

Json 响应：

{
    "time": 1,
    "annotations": [
        {
            "start": 1,
            "end": 5,
            "spot": "NASA",
            "confidence": 0.8143,
            "id": 18426568,
            "title": "NASA",
            "uri": "http://en.wikipedia.org/wiki/NASA",
            "label": "NASA"
        }
    ],
    "lang": "en",
    "langConfidence": 0.5051,
    "timestamp": "2019-11-20T07:29:02.227"
}

我现在在 for 循环中重复代码 5 次，因为 json 范围未知。 即 data3.map(y => y.annotations[1].start) data3.map(y => y.annotations[2].start)

以此类推，直到 4 点。

'''
const data1 = JSON.parse(res.data.jsondata);
const data2 = '[' + res.data.jsondata + ']';
const data3 = JSON.parse(data2);
console.log('loop log for faceId', data3)
        let y = "";
        for (let y of data3) {
            const face = y.annotations
            console.log('loop lenght', data3.map(y =>y.annotations.lenght))
            this.setState({

                lenght: data3.map(y => y.annotations.lenght),
                Start: data3.map(y => y.annotations[0].start),
                End: data3.map(y => y.annotations[0].end),
                Spot: data3.map(y => y.annotations[0].spot),
                Confidence: data3.map(y => y.annotations[0].confidence),
                Id: data3.map(y => y.annotations[0].id),
                Title: data3.map(y => y.annotations[0].title),
                URL: data3.map(y => y.annotations[0].uri),
                Label: data3.map(y => y.annotations[0].label),
        )}
}

'''

Answer 1

无论您在哪里使用标签示例，都必须进行未定义的检查

const start = data.annotations ? data.annotations.start : "" ;

你必须做 null 检查这些。 或者您也可以运行一个循环来检查未定义和 null 检查，然后忽略具有这些值的标签。 这取决于您如何使用这些标签。