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

Question

尝试显示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>)}
)

媒体状态是这样的：

{
page: 1,
results: [
{title: 'The Godfather'},
{title: 'A new hope'}
]
}

我使用的是nextjs，通过getServerSideProps((获取的数据运行良好。这是使用vanilla React，即使返回的数据完全相同，也不起作用。

Answer 1

我会在使用.map()之前添加一个额外的检查，如下所示：

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

通过这种方式，您可以检查media.results是否有值。

Answer 2

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

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