React App: How to display data from api using fetch

问题

I am trying to display school data from an external api using React. I'm just trying to display a school name to start. The school name appears in the console, but it doesn't show up in the browser.The api call is correct, as it works in Postman. Here is my code:

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      schoolName: '',
      // schoolData: {}
    }
  }

  fetchSchool(event) {
    event.preventDefault();

    const apiKey = 'XdOHSc8fKhMKidPu2HWqCZmMy9OxtCJamGC580Bi';
    const fields = `_fields=school.name,2015.aid.median_debt.completers.overall,2015.cost.tuition.in_state&school.name=${this.state.schoolName}`;
    const requestUrl = `https://api.data.gov/ed/collegescorecard/v1/schools?&api_key=${apiKey}&${fields}`;

    const school = fetch(requestUrl).then((res) => res.json()).then((data) => console.log(data.results[0]['school.name']));

    this.setState({
      schoolName: school
      // schoolData: school
    })
    console.log(this.state.schoolName);
  }

  setSchool(event) {
    event.preventDefault();
    this.setState({
      schoolName: event.target.value
    });
  }

  render() {
    // const schoolname = this.state.schoolName[0];
    // const {schooName} = this.state;
    return (
      <div>
        <form action="/school" method="GET" id="myform">
          <input type="text" className="form-control" id="enter_text" onChange={this.setSchool.bind(this)} />
            <button onClick={this.fetchSchool.bind(this)} type="submit" className="btn btn-primary" id="text-enter-button button submit">Submit</button>
        </form>
        <div>
        <p>School: {this.state.school} </p>
        </div>
      </div>
    );
  }
}

export default App;

回答1:

fetch is asynchronous. Therefore, setState is being called before the data has been fetched.

To fix this, call this.setState from inside of your then function

const school = fetch(requestUrl)
  .then((res) => res.json())
  .then((data) => {
    console.log(data.results[0]['school.name'])
    this.setState({
      schoolName: data.results[0]['school.name'],
      schoolData: data.results
    })
  });

回答2:

In your render method change this line because schoolName is your state variable and not school.

<p>School: {this.state.school} </p>

<p>School: {this.state.schoolName} </p>

来源：https://stackoverflow.com/questions/47491206/react-app-how-to-display-data-from-api-using-fetch

标签

reactjs

api

fetch