类型错误：无法从 API 响应中读取未定义的属性（读取“url”）

Question

我正在致力于根据搜索从 API 响应中导入游戏封面并将其显示在页面上。

此时，我可以检索游戏标题的数据以及我需要的封面图像的 URL。但是，我遇到了有关游戏封面 url 的错误。

TypeError: Cannot read properties of undefined (reading 'url')

this指向这行代码

            const gameData = result.map((game) => ({
                
                gameId: game.id,
                name: game.name,
        --->    cover: game.cover.url,    <--- this line
            }));

            setSearchedGames(gameData);

我的 API 响应如下所示：

据我所知，API 正在提供 url，但我不确定它为什么会导致问题。如果我删除该行代码，一切都会正常运行，并且结果显示不会被覆盖。输入该行代码后，gameData 完全返回 undefined。预先感谢您提供的任何帮助，我很乐意添加任何可能有帮助的其他代码。

Answer 1

这是一个简单的修复，当 React 第一次渲染时没有值，并且显然没有条件来捕捉这个......但是

有语法可以让您用最少的编码进行检查

示例：

{return data.game.url}

已修复：

{return data?.game?.url}

只是在数据后面添加这个简单的问号？。您正在检查数据是否返回未定义、无效或待处理。您也可以使用这个：

示例：

{data && data.game.url}

Answer 2

似乎您正在访问的密钥

cover

并不总是存在于返回的响应中。您需要在访问该密钥之前检查该密钥是否存在，或者使用可选链接，如下所示

game?.cover?.url

有关可选链的更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Answer 3

看起来您所附的代码片段中没有问题。 我认为您需要检查上面的代码片段。 也许有一个区域可以修改游戏数据之类的。 请仔细检查。

Answer 4

感谢您的回复。我能够通过以下方式解决问题：

我更改了上面的代码片段以匹配此：

            const gameData = result.map((game) => ({
                
                gameId: game.id,
                name: game.name,
        --->    cover: game.cover,    <--- removed .url
            }));

            setSearchedGames(gameData);

我最初的退货声明已将卡片设置为如下结构：

<Card key={game.gameId} border='dark'>
                                {game.cover ? (
                                    <Card.Img src={'http:' + game.cover} alt={`The cover for ${game.name}`} variant='top' />
                                ) : null}
                                <Card.Body>
                                    <Card.Title>{game.name}</Card.Title>
                                </Card.Body>
                            </Card>

我将其更改为：

<Card key={game.gameId} border='dark'>
                                {game.cover ? (
             ---> add .url here    <Card.Img src={'http:' + game.cover.url} alt={`The cover for ${game.name}`} variant='top' />
                                ) : null}
                                <Card.Body>
                                    <Card.Title>{game.name}</Card.Title>
                                </Card.Body>
                            </Card>

Answer 5

使用可选链接，比如 game?.cover?.url 或 game.cover?.url 它对我有用。