Блог

Привет, ребята, пытаюсь создать мини-приложение в react 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 data={people}/>
      <Planet data={planet}/>
    </div>
  );
}

export default App;
 

Star.js
Это мой звездный компонент, где я получаю все свои API-интерфейсы Star war

 import React, { useState, useEffect } from 'react';
import './Star.css';

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() {
            let result = await fetch("https://swapi.dev/api/people/?format=json");
            let data = await result.json();
            setPeople(data.results);
        }

        async function fetchPlanet() {
            let result = await fetch("https://swapi.dev/api/planets/?format=json");
            let data = await result.json();
            setPlanet(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>
            </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.name}</h4>
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>
    );
};

export default People;
 

Если я правильно понимаю вашу проблему, вы хотите отобразить компонент People, и проблема заключается в том, как передать ему данные, полученные в компоненте Star.

Решение состоит в том, чтобы переместить состояние данных в родительском компоненте таким образом, чтобы их можно было легко передавать всем его дочерним компонентам.

 function App(props) {

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

  useEffect(() => {
    async function fetchPeople() {
        let result = await fetch("https://swapi.dev/api/people/?format=json");
        let data = await result.json();
        setPeople(data.results);
    }

    async function fetchPlanet() {
        let result = await fetch("https://swapi.dev/api/planets/?format=json");
        let data = await result.json();
        setPlanet(data.results);
    }

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

  return (
    <div className="App">
      <Star
        people={people} //if you need these in the Star component
        planet={planet} //if you need these in the Star component
      />
      <People data={people}/>
      <Planet data={planet}/>
    </div>
  );
}