React API调用错误，导致黑屏

Question

我是编程新手，并试图构建示例项目。请问有人能告诉我如何解决这个黑屏问题的正确方向吗?

一开始是这个

import CardApi from "./CardApi"
const ListApi = ({response, loading}) => {


return (
<div className="mx-2 mb-10">
<h3 className="font-semibold text-xl text-slate-600">List API</h3>
<div className="grid gap-4 md:grid-cols-3">
{response && response.entries.map((api, index) =>  <CardApi />)}

</div>
</div>
)
}

export default ListApi```
//but got console error: Uncaught TypeError: Cannot read properties of undefined (reading 'map')

//So read on some answers on here and updated to

`import CardApi from "./CardApi"
const ListApi = ({response, loading}) => {

return (
<div className="mx-2 mb-10">
<h3 className="font-semibold text-xl text-slate-600">List API</h3>
<div className="grid gap-4 md:grid-cols-3">
{response && response.entries ?
response.map((api, index) =>  (
<CardApi /> 
)) : null}
</div>
</div>
)
}
export default ListApi
`

这一次，它闪烁数据和api占位符，但仍然在一秒钟后变为空白错误:响应。Map不是函数

任何帮助都会很感激，谢谢

Answer 1

看起来您试图映射到response.entries，但您的更新代码正试图映射到response对象。

{response && response.entries ?
response.map((api, index) =>  (
<CardApi /> 
)) : null}

应该

{response && response.entries ?
response.entries.map((api, index) =>  (
<CardApi /> 
)) : null}

根据你原来的帖子

Answer 2

回应。条目应为数组

{response && response.entries && response.entries.length>0 && response.entries.map((api, index) =>  <CardApi />)}