解构数组以显示 API 个结果

Question

我正在尝试显示 API 的结果，但似乎没有返回页面的整个部分。没有错误，所以解决这个问题有点混乱。

我的假设是，根据 API 返回数据的方式，我当前的数据解构设置不正确。这是我在控制台中从 API.

收到的响应

我想将这些结果附加到一个页面以显示这些视频游戏标题的名称和封面。

显示结果的部分

            <Container>
                <h2>
                    {searchedGames?.length
                        ? `Viewing ${searchedGames.length} results:`
                        : 'Search for a game to begin'}
                </h2>
                <CardColumns>
                    {(searchedGames || []).map((game) => {
                        return (
                            <Card key={game.gameId} border='dark'>
                                {game.cover ? (
                                    <Card.Img src={game.cover} alt={`The cover for ${game.name}`} variant='top' />
                                ) : null}
                                <Card.Body>
                                    <Card.Title>{game.name}</Card.Title>
                                </Card.Body>
                            </Card>
                        );
                    })}
                </CardColumns>
            </Container>

表单处理程序

    const handleFormSubmit = async (event) => {
        event.preventDefault();

        if (!searchInput) {
            return false;
        }

        try {
            

            const response = await getGame(searchInput);

            if (!response.ok) {
                throw new Error('Something went wrong...');
            }

            const { result } = await response.json();

            const gameData = result?.map((game) => ({
                
                gameId: game.id,
                name: game.name,
                cover: game.cover.url,

            }));

            setSearchedGames(gameData);
            setSearchInput('');
        } catch (err) {
            console.error(err);
        }
    };

搜索后，我收到了包含相应数据的 API 响应，但该页面根本没有显示任何内容（甚至没有显示“正在查看 xxx 个结果”部分，我认为这是一个线索指向 searchedGames 数组。）如果有人愿意，我很乐意添加任何额外的信息或代码。我觉得有一个简单的解决方案，但我一直无法找到解决此问题的方法。预先感谢您提供任何帮助！

编辑：

这里有一个有用的回复，建议我检查我的 searchedGames 数组，当我检查后，我发现它是空的。所以来自 API 的数据没有被放入“searchedGames”数组。我正在研究如何解决这个问题，但如果有人回答这个问题，我觉得这可能是一个有用的细节来提供帮助。问题是我的 searchedGames 数组没有填充 API 数据。

编辑 2：

export const getGame = (searchInput) => {
    return fetch(`***********`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        const accessToken = data.access_token;


        return fetch(`https://fathomless-river-46653.herokuapp.com/https://api.igdb.com/v4/games/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Client-ID': '********',
                'Authorization': `Bearer ${accessToken}`
            },
            body: `
                search "${searchInput}";
                fields name,cover.url;`
        })
        
    });
};

Answer 1

不完全确定实际 API 响应数据格式是否缺少详细信息，但我会尝试给出答案。

fetch 的 json() 方法 returns 您的 HTTP 请求的响应正文为 JSON。因此，您的响应数据是您的第一个屏幕截图之一，它是一个对象数组，而不是具有 result 属性的对象。但是，后者是您在代码中假设的：

const { result } = await response.json();

然后你继续，就好像 result 是你第一个屏幕截图的响应数组，而它实际上是 undefined，这样 gameData 在可选链接后解析为 undefined .

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

尝试直接使用 JSON 响应而不进行解构。这应该为您提供实际的游戏对象数组：

const result = await response.json();

解构数组以显示 API 个结果

Destructure array to display API results

apollo

reactjs

graphql