React 组件未正确加载

Question

I am trying to build a single-page React app, which loads content from an API using Axios.

I have created the component called "Importapi" and called it in the App.js file as yet nothing is showing up.

Does anyone have an idea as to why this is happening?

Importapi - Import Component

import React, { Component } from 'react';
import axios from "axios";
import "./index.css";

export class Importapi extends Component {

    constructor() {
        super();
        this.state = {
            trails: [],
        }
        //this.handleSubmit = this.handleSubmit.bind(this);
    };



    componentDidMount() {
        axios.get("https://www.hikingproject.com/data/get-trails?lat=46.589519&lon=7.912295&maxDistance=100&maxResults=15&key=200490043-7294b2e6976c168d4e44877bf48ef553")
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.log(error);
            });
    }





    render() {
        return (

            <div className="container2">
                <div className="container1">
                    {this.state.trails}
                </div>
            </div>
        )
    };

};

export default Importapi;

App.js - Single page React App

import React from 'react';
import logo from './logo.png';
import './App.css';
import Import from './import.js';
import Importapi from './axios-api'

function App() {
  return (
    <div className="App">
        <header>
            <title>Hikeero</title>
        </header>

        <nav>
            <div className="nav-bar logo">
                <button><a href ="/">BACK</a></button>
            </div>
            <div className="nav-bar items">
            </div>

            <button> <a href="/"> HOME </a> </button>
        </nav>

        <div align="right" >
            <br/>
        </div>

        <h1>Hikeero.</h1>


        <Import />
        <Importapi />


      <header className="App-header">
        <a
          className="App-link"
          href="/import.js/"
          target="_blank"
          rel="noopener noreferrer"
        >
            <br/>
            <br/>
            <br/>
          Click to Start
        </a>

      </header>

    </div>

  );
}

export default App;

There are no errors, just the API information isn't showing up.

Answer 1

You have to do this.setState({ trails : response.data }) just below console.log(response.data); to show the content on component. Thus the API response will be set into state with key name of trails.

componentDidMount() {
        axios.get("https://www.hikingproject.com/data/get-trails?lat=46.589519&lon=7.912295&maxDistance=100&maxResults=15&key=200490043-7294b2e6976c168d4e44877bf48ef553")
            .then(response => {
                // here once you receive response 
                // put the response data into state of the component 
                // as written below
                this.setState({trails: response.data})
            })
            .catch(error => {
                console.log(error);
            });
    }