时间戳

首页 > 解决方案 > React 组件未正确加载

javascript - React 组件未正确加载

问题描述

我正在尝试构建一个单页 React 应用程序，它使用 Axios 从 API 加载内容。

我创建了名为“Importapi”的组件并在 App.js 文件中调用它，但没有显示任何内容。

有谁知道为什么会这样？

Importapi - 导入组件

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 - 单页 React 应用程序

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;

没有错误，只是没有显示 API 信息。

标签： javascripthtmlcssreactjsaxios

解决方案

您必须在 console.log(response.data); 下方执行 this.setState({ trails : response.data }) 显示组件上的内容。因此，API 响应将设置为带有路径键名的状态。

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

推荐阅读