时间戳

首页 > 解决方案 > ReactJS 错误未处理拒绝 - 如何访问具有多个部分的 json 文件？

json - ReactJS 错误未处理拒绝 - 如何访问具有多个部分的 json 文件？

问题描述

我正在关注有关使用 Fetch 和 ReactJS 的教程，能够从 API/json 访问数据的某个部分，但是在尝试访问其他部分时，我收到错误消息。这是 JSON 文件，它使用以下 API：https ://api.myjson.com/file1

编码

import React, { Component } from 'react';
import {render} from "react-dom";
import './BuildingSimulation.css';

class BuildingSimulation extends Component {

    state = { data: [] }

    componentWillMount(){
        fetch('https://api.myjson.com/bins/zb5kf', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json',
                'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiR3JlZyIsInVuaXF1ZV9uYW1lIjoiZ2dyYWZmIiwibmJmIjoxNTI0ODM5Nzc1LCJleHAiOjE1MjQ5MjYxNzV9.xhvdfaWkLVZ_HLwYQuPet_2vlxNF7AoYgX-XRufiOj0'
            },
        }


        ) /*end fetch */
        .then(results => results.json()) 
        .then(data => this.setState({ data: data }))   
      }


    render() {
        console.log(this.state.data);
        return (

                     <div className="clientContainer">
                            {
                                this.state.data.map( item =>( 
                                <div>
                                    <span> {item.clientName} </span>

                                </div>
                                ))
                            }
                        </div> 
        );
      }
}

export default BuildingSimulation;

...所以我能够从 Segments 部分获取信息以显示在页面中，但是我如何还获取 json 文件标题中的 ID 和 totals 部分中的数据以显示在我的页面中？

标签： jsonreactjsapi

解决方案

您只存储segment来自 API 响应的数据。要访问其他数据，您需要将整个响应存储在state. 所以改变

.then(data => this.setState({ data: data.segments }))

至

.then(data => this.setState({ data: data }))

现在您可以访问所有响应数据。

更新：执行此操作后，this.state.data表示 json 数据。所以要访问segments，使用this.state.data.segments. 访问totals、使用this.state.data.totals等。

推荐阅读