.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. 为什么console没有显示，setState是async/为下一次render更新state的请求，所以不能立即观察到state的变化

以下代码在代码沙箱中工作，如果您有任何问题，请告诉我。

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
      })}
    </>
  );
}