Question

我正在测试React中的fetch API，但它没有显示任何内容并继续加载......我不确定我在哪里做错了。服务器是否无法发回数据？

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;

Answer 1

fetch(API_30)
      .then(response => response.json())
      .then(data => this.setState({ campers: data })
      );

data.campers不是data。

您可以通过console.log数据查看api返回的数据。

如果你这样做

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

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

从API获取数据失败

1 个答案: