更新状态后.map 不会重新渲染

Question

我已使用 useEffect 获取数据，并在控制台上获取数据。我已调用 setState 方法来更新状态，但 .map 函数不起作用。即使在控制台上也没有发生任何事情。

 import React, { useState, useEffect } from "react";


function HomePage() {
  const [isFlipped, setIsFlipped] = useState(false);

  const [cardData, setCardData] = useState([]);

  // useEffect function
  useEffect(async () => {
    const url = "https://rickandmortyapi.com/api/character";

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        const jsonData = json.results;
        setCardData(jsonData);
        console.log(jsonData);
      } catch (error) {
        console.log("error", error);
      }
    };
    fetchData();
  }, []);

  const handleClick = () => {
    setIsFlipped(!isFlipped);
  };

  return (
    <>
      
      {cardData.map((c) => {
        <h1>{c.id}</h1>;
      })}
     
    </>
  );
}

export default HomePage;

Answer 1

您的代码有一些错误：

1. 您不需要/不能在 useEffect 回调上使用 async 关键字，只需声明该函数并调用它即可。
2. 主要问题是，您的地图永远不会返回任何内容。
3. 没那么重要，但如果将cardData初始化为null，则可以在映射之前检查它是否为真。
4. 至于为什么控制台中没有显示任何内容，setState 是异步/更新下一次渲染状态的请求，因此无法立即观察到状态变化

以下代码在代码沙箱中运行，如果您有任何疑问，请告诉我。

export default function HomePage() {  {
  const [isFlipped, setIsFlipped] = useState(false);

  const [cardData, setCardData] = useState(null);

  // useEffect function
  useEffect(() => { //removed async here
    const url = "https://rickandmortyapi.com/api/character";

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        const jsonData = json.results;
        setCardData(jsonData);
        console.log(jsonData);
      } catch (error) {
        console.log("error", error);
      }
    };
    fetchData();
  }, []);

  const handleClick = () => {
    setIsFlipped(!isFlipped);
  };

  return (
    <>
      {cardData && cardData.map((c) => {
        return <h1>{c.id}</h1>; //note here: return keyword
      })}
    </>
  );
}