在 API 調用之前 React 鈎子組件呈現

Question

我需要創建一個 React 應用程序，讓你列出 pokemons 和類型。 我從 PokeAPI 獲取數據。 從 App 組件中獲取它然后將其傳遞給子組件是一個好習慣，還是從子組件中獲取它們更好？

我在主應用程序中獲取它，我可以看到獲取工作，因為我 console.log 數據，但我的組件沒有獲取它，因此我得到一個 props.map is not a function in .

這是我的 App.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;

這是我的 PokemonList.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

這是我的回答的摘要

• 最好在父組件中獲取一些初始數據，然后在必要時在子組件中進一步請求以節省網絡使用
• 在渲染元素之前使用useEffect鈎子獲取結果
• 您缺少的是您沒有在 pokemon 中使用道具，您應該將 get 調用放在App組件的 useEffect 鈎子中，因為子組件在道具傳遞給它之前正在呈現，這就是您收到undefined錯誤的原因