"為什么我的數據沒有從 this.state 呈現？"

Question

我一直在嘗試讓一個數組過來做出反應，然后在瀏覽器上顯示它。 數據即將到來，但由於某種原因我無法顯示它。

反應：

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>)
    }
}

我最初試圖將其映射到多行 HTML 中，但通過故障排除了解到我什至無法從數組中獲取單個元素。

來自 /draft/get-players 的 JSON：

[
    {
        "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
    }
]

Answer 1

\/\/你還沒有聲明數組 player 只是先初始化數組它會起作用

 this.state = {
              players:[]
           }

Answer 2

我弄清楚了這個問題。

該頁面在獲取數據之前正在呈現，因此當頁面呈現時它會拋出錯誤，因為“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>)
    }
}