Question

嗨，我刚刚开始学习作为副项目的反应。

我正在使用一个快速后端调用一个api，该api向我的组件返回一些JSON。我似乎无法访问嵌套数组以遍历并显示。

import React, { Component } from 'react';
import '../../app.css';

export class Table extends Component {
constructor(props) {
    super(props);
    this.state = {
        jsonItems: [],
        isLoaded: false
    }
}

componentWillMount() {
    this.renderMyData();
}

renderMyData() {
    fetch('/api/nfl')
        .then(res => res.json())
        .then(json => {
            this.setState({
                jsonItems: JSON.parse(json),
                isLoaded: true
            })
        })
}

render() {
    console.log(this.state.jsonItems.fullgameschedule);
    return (
        <table>
            <thead>
                <tr>
                    <th>Test 1</th>
                    <th>Test 2</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    )
}
}

Json输出：

{
"fullgameschedule": {
    "lastUpdatedOn": "2018-08-24 2:55:41 PM",
    "gameentry": [
     {
    "id": "43306",
    "week": "1",
    "scheduleStatus": "Normal",
    "originalDate": null,
    "originalTime": null,
    "delayedOrPostponedReason": null,
    "date": "2017-09-07",
    "time": "8:30PM",
    "awayTeam": {
      "ID": "73",
      "City": "Kansas City",
      "Name": "Chiefs",
      "Abbreviation": "KC"
    },
    "homeTeam": {
      "ID": "50",
      "City": "New England",
      "Name": "Patriots",
      "Abbreviation": "NE"
    },
    "location": "Gillette Stadium"
      }
    ]
  }
}

jsonItems被填充（如我的react开发工具所示）。但我似乎无法遍历json数组“ gameentry”

我可以打印出{this.state.jsonItems.fullgameschedule}，但是我无法再访问它，例如{this.state.jsonItems.fullgameschedule.gameentry}或gameentry [0]而没有错误消息：

无法读取未定义的属性“ gameentry”

起初我以为是因为js是异步的，所以它在呈现之前就加载了组件，因此我将componentDidMount（）更改为componentWillMount（），并且应该处理该问题。如何访问数组列表并进行迭代以将其显示给组件？或只是正确方向上的一般点。

编辑：如何获取数据。

    var options = {
        url: url,
        auth: {
            user : 'xxx',
            password : 'xxx',
        }
    }
    app.get('/api/nfl', function (req, res) {
        request(options, function (err, response, body){
            if (err) {
                console.log(err);
            }
            res.send(JSON.stringify(response.body));
        })
    });

Answer 1

您认为，由于数据是以异步方式传入的，因此您需要以某种方式进行处理。当您尝试从undefined对象获取属性时，会遇到类似您的错误。因此，您应该使用条件渲染。

在此之前，使用componentWillMount代替componentDidMount不起作用，因为render不会等待这两种方法中的任何一种完成工作。实际上，componentWillMount将被弃用，因此请使用componentDidMount进行异步操作。

由于您尚未共享代码，因此您如何尝试获取数据，我在这里提出了一个盲目的建议。

render() {
    console.log(this.state.jsonItems.fullgameschedule);
    return this.state.jsonItems.fullgameschedule && (
        <table>
            <thead>
                <tr>
                    <th>Test 1</th>
                    <th>Test 2</th>
                </tr>
            </thead>
            <tbody>
            <tr>
              <td>{this.state.jsonItems.fullgameschedule.lastUpdatedOn}</td>
              </tr>
            </tbody>
        </table>
    )
}

这只是一个例子。您可以根据需要进行更改。

在React Component中访问嵌套的JSON数据

1 个答案: