Блог

Привет, люди, я новичок в 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)} />amp;nbsp;amp;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 amp;amp; 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;
 

Planet.js

 import React from 'react';

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

    return (
        <div className="row">
            {data amp;amp; 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;
 

Вы передаете people и planet как реквизит, но используете его как data реквизит:

 <Planet  planet={planet}/> 

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

Вы передаете людей и планету в качестве реквизита в приложение, но выполняете выборку в 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>
    );
}