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

我正在尝试将以下json文件的所有部分显示到我的reactjs页面中：

代码如下：

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;

import React，{Component}来自'React'；
从“react dom”导入{render}；
类应用程序扩展组件{
状态={
数据：{
段：[]，
总数：[]，
}
}
组件willmount（）{
取（'https://api.myjson.com/file', {
方法：“GET”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
“授权”：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.EYJDHRWOI8VC2NOZW1HCY54BWXZB2FWLM9YZY93CY8YMDA2LZW50AXR5L2SYWLTCY9UYW1LIJOIR3JLZYISINV1ZV9UYW9UYW9UYWZMIJJ0ODNZC1LCJLEHAIOJELQ5MJXNZV9.XVDFAWKLWKLWK7AOX-XYG0”
},
}
)/*结束提取*/
.then（results=>results.json（））
.then（data=>this.setState（{data:data}））
}
render（）{
console.log（this.state.data）；
返回(
{
this.state.data.segments.map（项=>）
{item.clientName}
))
}
{
this.state.data.totals.map（项=>(
{item.segmentType}
{item.adjTotalSqrFt}
))
}
);
}
}
导出默认应用程序；

---

…该代码用于使用json文件的segments和totals部分的数据，但是从顶部部分获取id和用户名时遇到问题

data

是一个对象而不是数组，因此对其调用

map

会触发错误

只需执行

this.state.data.segments.map（…）

，并将初始状态更改为

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

---

map

是

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

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


{
this.state.data.segments.map（item=>（//此处更改
{item.clientName}
))
}
riwu-谢谢，我修改了我发布的代码，能够显示json文件的段和总计部分的数据。但是，如何获取位于json文件顶部的id和用户名？感谢您可以使用
this.state.data.id
，
this.state.data.userName
访问它们。