如何将API数据传递到反应中的状态

Question

在过去的一周中，我一直在学习反应，我发现这真的很有趣。但是，我被卡住了。我正在调用API并使用自定义获取钩获取数据。这是我声明常数并将数据以及其他内容提取的一般函数提取错误并在显示数据之前显示加载程序的一般函数的内容表示的。然后，我将这些数据作为道具传递到另一个称为Animelist的组件，该组件负责映射数据。我现在想做的是将这些数据传递到一个状态，以便以后根据需要对其进行修改。然后，我想将状态作为道具传递给动画派组件，而不是直接数据。我宣布了一个称为topanime的状态。然后，我使用使用效果钩将topanime状态设置为数据。但是，我在控制台上遇到了一个错误，说数据基本上是无效的，我不了解如何进行。我觉得这可能与使用效果钩中的依赖关系阵列有关，但我不确定。任何指导都将不胜感激。以下是我的代码。谢谢。

import { useFetch } from '../hooks/useFetch'
import Error from "./Error"
import Spinner from "../components/spinner/Spinner"
import AnimeList from "../components/animelist/AnimeList"
import Header from '../Header'
import './TopAnime.css'
import { useState } from 'react'
import { useEffect } from 'react'
function TopAnime() {

  const [topAnime, setTopAnime] = useState([])
  const {data, isPending, error} = useFetch('https://api.jikan.moe/v4/top/anime')
  useEffect(() => {
    (async () => {
      setTopAnime(data);
    })();
  }, [data]);

  return (
    <div className="top-anime">
    <Header/>
    {error && <Error/>}
    {isPending && <Spinner/>}
    {data && <h1>Top Anime</h1>}
    {data && <AnimeList animelist={topAnime}/>}
  </div>
  )
}

export default TopAnime

这是我收到的错误 在此处输入映像说明

更新：我设法自己修复了以某种方式修复它。我要做的就是添加＆amp; amp;就像我为数据所做的那样。我不确定为什么要解决问题，但是解释真的很有帮助。以下是现在的工作代码。

import { useFetch } from '../hooks/useFetch'
import Error from "./Error"
import Spinner from "../components/spinner/Spinner"
import AnimeList from "../components/animelist/AnimeList"
import Header from '../Header'
import './TopAnime.css'
import { useState } from 'react'
import { useEffect } from 'react'
function TopAnime() {

  const [topAnime, setTopAnime] = useState([])
  const {data, isPending, error} = useFetch('https://api.jikan.moe/v4/top/anime')
  useEffect(() => {
    (async () => {
      setTopAnime(data);
    })();
  });
  return (
    <div className="top-anime">
    <Header/>
    {error && <Error/>}
    {isPending && <Spinner/>}
    {data && <h1>Top Anime</h1>}
    {data && topAnime && <AnimeList animelist={topAnime}/>}
  </div>
  )
}

export default TopAnime

Answer 1

编辑的答案：

我看到您找到了答案。它起作用的原因，如果我没记错的话，是因为当您最初加载apidata时，topanime仍然是无效的，因为呼叫是异步的。基本上，它试图在加载数据之前使用（空的）topanime支柱渲染您的动画派，从而使您有错误的错误。修复它的更好方法（如果您希望更多的组件使用topanime数据）是在申报表开始时检查它，这样：

 return ( topAnime ? (
    <div className="top-anime">
    <Header/>
    {error && <Error/>}
    {isPending && <Spinner/>}
    {data && <h1>Top Anime</h1>}
    {data && <AnimeList animelist={topAnime}/>}
  </div> ) : (<h1>loading..</h1>)
  )

这将首先检查topanime是否包含数据，如果没有数据，它将显示<强>加载直到它做到。

旧的答案：

如果将API调用移入使用效果，则应该很好。我使用Axios而不是使用Axios进行此示例，然后删除了一些混乱，使您更明显地看到发生了什么。这是Codesandbox链接，您可以在控制台中看到加载的数据： htttps://codesandbox.io/ s/exampleData-bk56bi

import { useState, useEffect } from "react";
import axios from "axios";
function TopAnime() {
  const [topAnime, setTopAnime] = useState([]);

  useEffect(() => {
    (async () => {
      const data = await axios.get("https://api.jikan.moe/v4/top/anime");
      setTopAnime(data);
    })();
  }, []);

  return <div className="top-anime">{console.log(topAnime)}</div>;
}

export default TopAnime;