React首次渲染可展示API数据，刷新时出现Cannot map undefined报错求助

我来帮你分析下这个问题的根源，以及对应的解决办法：

问题原因 #

你的media状态初始值是一个空对象{}，当组件首次渲染（尤其是刷新页面后），useEffect里的getData还没完成异步请求，此时media还是初始的空对象。这时候你尝试访问media.results，得到的是undefined，再调用map自然就会抛出“Cannot map undefined”的错误。

你提到首次渲染正常，大概率是因为首次加载时请求完成得比较快，组件渲染时media已经有了results数据；但刷新页面时，请求可能有延迟，就暴露了初始状态的问题。而getServerSideProps能正常工作，是因为它在服务器端就把数据获取完成，组件渲染时已经有了完整的media数据，不会出现results为undefined的情况。

解决方案 #

这里有几个简单有效的修复方式：

1. 给初始状态设置默认的results空数组

把初始的useState改成：

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

这样即使请求还没完成，media.results也是一个空数组，调用map不会报错，只会渲染空内容，等请求完成后再更新渲染真实数据。

2. 使用可选链操作符（Optional Chaining）进行安全访问

在渲染时用?.来避免访问undefined的属性：

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

?.会在属性不存在时返回undefined，而undefined在JSX中会被忽略，不会触发报错。

3. 添加加载状态判断

如果想在加载过程中显示加载提示，可以额外加一个加载状态：

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

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();
  setMedia(data);
  setLoading(false);
}

return (
  loading ? <p>Loading...</p> : (
    media.results.map((item, index) => <p key={index}>{item.title}</p>)
  )
)

这几种方式都能解决你遇到的刷新报错问题，选最适合你业务场景的就行~

内容的提问来源于stack exchange，提问作者DGB