Javascript 第一次渲染时可以映射，但刷新时显示无法映射未定义的

试图显示来自API的内容。在第一次渲染时，信息（电影标题）将毫无问题地显示。当我刷新时，它说不能映射未定义

这是密码

  const [media, setMedia] = useState({});

  useEffect(() => {
    getData();
  }, []);

  async function getData() {
    const res = await fetch(
      `https://api.themoviedb.org/3/movie/top_rated?api_key=${process.env.NEXT_PUBLIC_API_KEY}&language=en-GB&page=1&region=GB`
    );
    const data = await res.json();

    return setMedia(data);
  }
  return (
    
      {media &&
        media.results.map((item, index) => <p key={index}>{item.title}</p>)}
)

---

我使用的是nextjs，通过getServerSideProps（）获取的数据工作正常。这是使用vanilla React，即使返回的数据完全相同，也不起作用。

在使用

.map（）

之前，我会添加一个额外的检查，如下所示：

{media && media.results &&
        media.results.map((item, index) => <p key={index}>{item.title}</p>)}

{media&&media.results&&
media.results.map（（item，index）=>
{item.title}
）}

这样，您就可以检查

media.results

是否有值。

{（media？.results | | |[]）.map（（项目，索引）=>
{item.title}
）
{(media?.results || []).map((item, index) => <p key={index}>{item.title}</p>)}

尝试为结果数组添加默认值以防止未定义

{(media?.results || []).map((item, index) => <p key={index}>{item.title}</p>)}