如何显示axios获取数据

Question

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

控制台数据

https://ibb.co/1MfgDgW

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;

People.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;

Answer 1

您将people 和planet 作为道具传递，但将其用作data 道具：

<Planet  planet={planet}/> 

const Planet = (props) => {
// change to this, people too
    const { planet } = props;
};

Answer 2

您将人和行星作为道具传递给 App，但您正在 Star.js 中执行获取。 您可能需要重组您的应用程序，以便由应用程序完成数据获取，然后将所有内容作为道具传递。

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