reactjs - 如何显示axios获取数据

问题描述

大家好我是 React js 的新手，我在显示数据时遇到问题，在我的应用程序中我获取了数据但我无法在网页中显示不知道哪里错了请尝试修复我的错误或告诉我应该怎么做我做？

控制台数据

Star.js

import Axios from 'axios';
import React, { useState, useEffect } from 'react';
import './Star.css';
import Planet from './Planet';
import People from './People';

const Star = () => {

    const [search, setSearch] = useState('');
    const [people, setPeople] = useState([]);
    const [planet, setPlanet] = useState([]);

    const onSubmit = (e) => {
        e.preventDefault();
        if (search === "") {
            alert("please Enter some value");
        }
    }

    useEffect(() => {
        async function fetchPeople() {
            const res = await Axios.get("https://swapi.dev/api/people/?format=json");
            console.log(res.data.results);
            setPeople(res.data.results);
        }

        async function fetchPlanet() {
            const res = await Axios.get("https://swapi.dev/api/planets/?format=json");
            console.log(res.data.results);
            setPlanet(res.data.results);
        }

        fetchPeople();
        fetchPlanet();
    }, [])

    // console.log("people", people);
    // console.log("planet", planet);

    return (
        <div>
            <div className='container'>
                <h2>Star War </h2>
                <div className='jumbotron'>
                    <input type="text"
                        className="form-control"
                        placeholder='Search...'
                        value={search}
                        onChange={(e) => setSearch(e.target.value)} />&nbsp;&nbsp;
                    <span><button className='btn btn-secondary' onClick={onSubmit}>Search</button></span>
                </div>  
                <People  people={people}/>
                <Planet  planet={planet}/> 
            </div>
        </div>
    )
}

export default Star;

人.js

import React from 'react';

const People = (props) => {
    const { data } = props;

    return (
        <div className="row">
            {data && data.map((people, i) => {
                return (
                    <div className="col-md-3" key={i}>
                        <div className="card">
                            <div className="card-body">
                                <h4>{people.data.results[0].name}</h4>
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>
    );
};

export default People;

行星.js

import React from 'react';

const Planet = (props) => {
    const { data } = props;

    return (
        <div className="row">
            {data && data.map((planet, i) => {
                return (
                    <div className="col-md-3" key={i}>
                        <div className="card">
                            <div className="card-body">
                                <h4>{planet.data.results[0].name}</h4>
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>
    );
};

export default Planet;

App.js 这是我包含所有组件的 App.js 文件

import './App.css';
import Star from './Star';
import People from './People';
import Planet from './Planet';

function App(props) {

  const { people, planet } = props;

  return (
    <div className="App">
      <Star
        people={people}
        planet={planet}
      />
      <People data={people} />
      <Planet data={planet} />
    </div>
  );
}

export default App;

标签： reactjsapireact-hooksjsx

reactjs - 如何显示axios获取数据

问题描述

解决方案

推荐阅读