.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 关键字，只需声明函数并调用它即可。
主要问题是，您的地图从来没有 return 任何东西。如果你使用大括号，你必须使用 return 关键字到 return
没那么重要，但如果将 cardData 初始化为 null，则可以在映射之前检查它是否为真。
为什么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
      })}
    </>
  );
}

.map 在更新状态后没有重新渲染

.map is not getting re-rendered after updating the state

javascript

dictionary

setstate

reactjs