使用多个部分访问 API/json 时出现问题答案

【问题标题】：Issue in accessing API/json with multiple sections使用多个部分访问 API/json 时出现问题
【发布时间】：2018-04-29 01:44:11
【问题描述】：

我正在尝试将以下 json 文件的所有部分显示到我的 reactjs 页面中：https://api.myjson.com/bins/cdres

下面是代码：

import React, { Component } from 'react';
import {render} from "react-dom";


class apps extends Component {

    state = { 
        data: {
            segments: [],
            totals: [],
        }
    }

    componentWillMount(){
        fetch('https://api.myjson.com/file', {
            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.segments.map( item =>( 
                                <div>
                                    <span> {item.clientName} </span>

                                </div>
                                ))
                            }
                            {
                                this.state.data.totals.map(item =>(
                                    <div>
                                        <span> {item.segmentType} </span>
                                        <span> {item.adjTotalSqrFt} </span>
                                    </div>
                                ))
                            }
                        </div> 
        );
      }
}

export default app;

...该代码用于使用 json 文件的段和总计部分的数据，但是在从顶部获取 id 和用户名时遇到问题？

【问题讨论】：

标签： json reactjs api fetch

【解决方案1】：

data 是一个对象而不是数组，因此在其上调用 map 会触发错误。

只需改为this.state.data.segments.map(...)，并将初始状态更改为

state = { data: { segments: [] } }

【讨论】：

riwu - 谢谢，我修改了我发布的代码，能够显示来自 json 文件的段和总计部分的数据。但是，如何获取位于 json 文件顶部的 id 和 userName？谢谢
您可以通过this.state.data.id、this.state.data.userName 访问它们。

【解决方案2】：

map 是array 的函数。 data 是一个对象，而 data.segments 是一个数组。您将需要更改代码如下

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

【讨论】：