javascript - .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

您的代码有一些错误:

您不需要/不能在 useEffect 回调上使用 async 关键字，只需声明该函数并调用它。

主要问题，您的 map 永远不会返回任何内容。如果使用花括号，则必须使用 return 关键字返回

不那么重要，但是如果将 cardData 初始化为 null，则可以在映射之前检查它是否为真。

至于为什么console什么都没有显示，setState是async/下一次渲染更新状态的请求，因此无法立即观察到状态变化

以下代码适用于代码沙箱，如果您有任何问题，请告诉我。

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