时间戳

首页 > 解决方案 > 如何在正文中显示人员数据

javascript - 如何在正文中显示人员数据

问题描述

大家好，试图在 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

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)} />&nbsp;&nbsp;
                    <span><button className='btn btn-secondary' onClick={onSubmit}>Search</button></span>
                </div>
            </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.name}</h4>
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>
    );
};

export default People;

标签： javascriptreactjsapireact-hooks

解决方案

如果我正确理解您的问题，您希望显示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>
  );
}

推荐阅读