Проблема доступа к API / JSON с несколькими разделами

Question

Я пытаюсь отобразить все разделы следующего файла json на своей странице реагировать: 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, но у меня проблемы с получением идентификатора и имени пользователя из верхней секции?

Answer 1

map является функцией array. data является объектом, а data.segments является массивом. Вам нужно будет изменить код, как показано ниже

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

Answer 2

data является объектом, а не массивом, поэтому вызов map вызывает ошибку.

Просто вместо этого сделайте this.state.data.segments.map(...) и измените ваше начальное состояние на

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