Почему мои данные не выводятся из this.state?

Я пытаюсь получить массив данных в react и затем отобразить его в браузере. Данные приходят, но по какой-то причине я не могу их отобразить.

ReactJs:

import React, { Component } from "react";

export default class RegisterPage extends Component {
    constructor(props){
        super(props);
        this.state = {
            
        };

        this.getPlayers();
    }

    getPlayers() {
        fetch('/draft/get-players')
        .then((response) => response.json())
        .then((data) => {
            this.setState({
                players: data,
            });
        });
    }

    render(){
        return (<h1>{this.state.players[0].name}</h1>)
    }
}

Изначально я пытался .map это в несколько строк HTML, но в процессе поиска неисправностей узнал, что я не могу получить даже один элемент из массива.

JSON из /draft/get-players:

[
    {
        "id": 1,
        "name": "Aidan Hutchinson",
        "position": "EDGE",
        "EstimatedRound": 1,
        "college": "Michigan",
        "age": "SR",
        "TakenRound": null,
        "TakenPick": null
    },
    {
        "id": 2,
        "name": "Aidan Hutchinson",
        "position": "EDGE",
        "EstimatedRound": 1,
        "college": "Michigan",
        "age": "SR",
        "TakenRound": null,
        "TakenPick": null
    },
    {
        "id": 3,
        "name": "Kayvon Thidobeaux",
        "position": "EDGE",
        "EstimatedRound": 1,
        "college": "Oregon",
        "age": "SOPH",
        "TakenRound": null,
        "TakenPick": null
    },
    {
        "id": 4,
        "name": "Kyle Hamilton",
        "position": "S",
        "EstimatedRound": 1,
        "college": "Notre Dame",
        "age": "JR",
        "TakenRound": null,
        "TakenPick": null
    },
    {
        "id": 5,
        "name": "Ikem Ekwonu",
        "position": "OL",
        "EstimatedRound": 1,
        "college": "NC State",
        "age": "SOPH",
        "TakenRound": null,
        "TakenPick": null
    }
]

//вы не объявили массив игроков просто инициализируйте массив сначала он будет работать

 this.state = {
              players:[]
           }

Я разобрался с проблемой.

Страница рендерилась до получения данных, поэтому при рендеринге страницы возникла ошибка, так как 'this.state.players' был пуст.

Я исправил это, создав элемент с начальным рендером, зная, что он будет пустым, но при изменении состояния он обновляется до элемента. Элемент содержит JSX, который затем рендерится с моей информацией.

Код: 

import React, { Component } from "react";

export default class RegisterPage extends Component {
    constructor(props){
        super(props);
        this.state = {
            players:[],
         }

        this.getPlayers();
    }


    getPlayers() {
        fetch('/draft/get-players')
        .then((response) => response.json())
        .then((data) => {
            this.setState({
                players: data,
            });
        });
    }

    render(){
        let players = this.state.players.map((player)=>{
            return(
                <div>
                    {player.name}
                </div>
            );
        }
        );
        return (
            <div>
                {players}
            </div>)
    }
}

Этот поток SO помог мне решить эту проблему. Создание элементов динамически внутри компонента React

Вернуться на верх