Reactjs 从API获取数据失败

我正在测试React中的FetchAPI，但它没有显示任何内容，并且一直在加载。。。我不确定我哪里做错了。服务器是否无法将数据发送回

import React, { Component } from 'react';
    import fetch from 'isomorphic-fetch';
    import './App.css';

    const API_30 = 'https://fcctop100.herokuapp.com/api/fccusers/top/recent';

    class App extends Component {
      constructor(props){
        super(props);
        this.state = {campers: []};
        }
      componentDidMount() {
        fetch(API_30)
          .then(response => response.json())
          .then(data => this.setState({ campers: data.campers })
          );

      }

      render() {
    if(!this.state.campers){return <p>Loading...</p>}
        return (
         <div className="App">
            <h1 className="Table-header">FreeCodeCamp Leaderboard</h1>
           {this.state.campers.map((camper) => 
             <div>{camper.username}</div>
           )

           }

              </div>);
      }
    }

    export default App;

import React，{Component}来自'React'；
从“同构提取”导入提取；
导入“/App.css”；
康斯特阿皮尤30酒店https://fcctop100.herokuapp.com/api/fccusers/top/recent';
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={campers:[]}；
}
componentDidMount（）{
提取（API_30）
.then（response=>response.json（））
.then（data=>this.setState（{campers:data.campers}）
);
}
render（）{
如果（！this.state.campers）{return正在加载…
}
返回(
FreeCodeCamp排行榜
{this.state.campers.map（（camper）=>
{camper.username}
)
}
);
}
}
导出默认应用程序；

它不是

数据。露营者

它只是

数据

您可以通过

console.log

ing数据查看从api返回的数据

如果你这样做

fetch(API_30)
      .then(response => response.json())
      .then(data => console.log(data)
      );

---

您可以在控制台中看到数据已经是一个数组。

为我们提供浏览器网络部分中显示的内容。它只在浏览器上显示“加载…”。只有data.campers未定义时，您才会看到加载程序，因为

！由于this.state.campers设置为true，因此this.state.campers

最初将返回false。检查API响应以查看data.campers是否未定义

fetch(API_30)
      .then(response => response.json())
      .then(data => console.log(data)
      );