React钩子组件在API调用之前呈现

Question

我需要创建一个React应用程序，让你列出口袋妖怪和类型。我从PokeAPI获取数据。从应用程序组件获取数据然后将其传递给子组件是一种好的做法，还是从子组件获取数据更好？

我在主应用程序中获取它，我可以看到获取工作，因为我需要控制台。记录数据，但是我的组件没有得到它，因此我得到了一个道具。map不是中的函数。

这是我的应用程序。js:

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import PokemonList from "./components/PokemonList";

const App = (props) => {
  const [pokemons, setPokemons] = useState([]);

  const [types, setTypes] = useState([]);

  const [isLoading, setIsLoading] = useState(true);

  const getPokemons = () => {
    const axios = require("axios").default;
    axios.get("https://pokeapi.co/api/v2/pokemon").then(function (response) {
      console.log("Fetched pokemons");
      console.log(response.data.results);
      setIsLoading(false);
      setPokemons(response.data.results);
    });
  };

  const getTypes = () => {
    setIsLoading(true);
    const axios = require("axios").default;
    axios.get("https://pokeapi.co/api/v2/type").then(function (response) {
      console.log("Fetched types");
      console.log(response.data.results);
      setIsLoading(false);
      setTypes(response.data.results);
    });
  };

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/pokemons" onClick={getPokemons}>
                Pokemons
              </Link>
            </li>
            <li>
              <Link to="/types">Types</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/pokemons">
            <Pokemons pokemons={pokemons} />
          </Route>
          <Route path="/types">
            <Types />
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

function Pokemons(pokemons) {
  return <PokemonList props={pokemons} />;
}

function Types(typeList) {
  return <h2>TYPES:</h2>;
}

export default App;

这是我的口袋妖怪列表。js:

import React from "react";
import { Card } from "semantic-ui-react";
import PokeCard from "./PokeCard";

const Pokemonlist = (props) => {
  let content = (
    <Card.Group>
      {props.map(function (object, i) {
        return <PokeCard pokemon={object} key={i} />;
      })}
    </Card.Group>
  );

  return content;
};

export default Pokemonlist;

最后一个是我的PokeCard。js

import { Card, Image } from "semantic-ui-react";
import React from "react";

const PokeCard = (pokemon) => {
  let content = (
    <Card>
      <Card.Content>
        <Image floated="right" size="mini" src={pokemon.img} />
        <Card.Header>{pokemon.name}</Card.Header>
        <Card.Meta>{pokemon.base_experience}</Card.Meta>
        <Card.Description>ID: {pokemon.id}</Card.Description>
      </Card.Content>
    </Card>
  );

  return content;
};

export default PokeCard;

所以基本的想法是：

在主页上，单击Pokemons按钮，该按钮调用fetch，然后呈现PokemonList组件，该组件基本上只呈现我获取的数据中的多个PokeCard组件。

1、我在这里错过了什么？

2、在我的情况下，如果没有任何变化，我需要使用useEffect吗？

3、我应该什么时候取数据，在哪里取？

编辑：我想使用零类的钩子

Answer 1

这是我回答的摘要

• 如果需要保存网络使用情况，最好在父组件中获取一些初始数据，然后在子组件中发出进一步请求
• 在渲染元素之前，使用useffecthook获取结果
• 您缺少的是您没有在口袋妖怪中使用道具，您应该将get调用放在App组件中的useffect钩子中，因为子组件在道具传递给它之前正在渲染，这就是您得到未定义的错误的原因