useEffect 在页面加载错误时调用 API

Question

我正在从事一个项目，该项目利用 IGDB 显示有关各种视频游戏标题的信息。我在搜索页面上收到了一个 API 调用，它 return 适当地提供了信息。单击搜索中的其中一个标题后，我会加载一个包含游戏详细信息的新页面。 API 对详细信息的调用与对搜索功能的调用完全相同（除了它们从数据库中检索不同的字段，除此之外，完全相同）并且 return数据适当且格式完全相同（objects 的数组。）但是，我在游戏详细信息页面上显示数据时遇到了很多麻烦。

这是我无法显示的回复：

并且，为了尽可能多地为你们提供详细信息，以下是搜索页面成功显示的响应：

我设置它的方式是运行在页面加载时使用一个 useEffect 挂钩。钩子确实运行，并且数据被 returned，但显示数据一直是一个挑战。这是当前的钩子。

    useEffect(() => {

        async function getGameId(gameId) {

            const response = await getSpecificGame(gameId);

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

            const result = response.json();

            const gameData = result?.map((game) => ({

                gameId: game.id,
                name: game.name,
                cover: game.cover,
                summary: game.summary,
                platforms: game.platforms,
                genres: game.genres,
                
            }));

            setSelectedGame(gameData);
        }

        getGameId(gameId);
        
    }, [])

使用此代码我收到以下错误：

Uncaught (in promise) TypeError: result.map is not a function

由于 result.map 出现错误，我不知道该从哪里开始。我想知道 response.json() 行是否不必要或放错了地方，但是数据 returning 的方式与搜索页面的方式完全相同，我不确定我会怎么做需要改变。错误不会在响应中抛出，这意味着数据返回正常，但它会在 result.map() 行上抛出，这意味着结果 = response.json() 不知何故 incorrect/unnecessary ，或者我错过了另一条需要在那里的线。但这让我非常困惑，因为我进行的另一个 API 调用可以执行搜索，并且设置方式相同。对于额外的上下文，我也会从搜索页面 post 正常运行 API 调用，这个在表单处理程序中：

    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,
            }));

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

这些函数附带 API 调用。

export const getGame = (searchInput) => {
    return fetch(`https://id.twitch.tv/oauth2/token?client_id=************&client_secret=****************&grant_type=client_credentials`, {
        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;`
            })
        });
};

export const getSpecificGame = (gameId) => {
    return fetch(`https://id.twitch.tv/oauth2/token?client_id=************&client_secret=**************&grant_type=client_credentials`, {
        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: `
                fields name,summary,platforms.name,genres.name,cover.url;
                where id = ${gameId};`
            })
        });
}

这似乎是一个简单的问题，适当地更改语法以使用 useEffect 而不是表单处理程序来运行，但事实证明这是一个相当大的挑战。我已经查看了大约 20 个类似问题的线程，但是 none 其中已经能够解决我的问题。

我想知道我是否应该完全走另一条路，完全删除 useEffect 钩子并尝试其他东西，但这感觉像是一个学习如何使用 useEffect 的机会，所以我正在尽我最大的努力这个工作。

我很乐意附上任何额外的代码来帮助回答。我 post 昨天提出了一个非常相似的问题并收到了一些有用的回复，但从那以后我取得了进展并达到了另一个障碍点。预先感谢任何能够提供帮助的人！

Answer 1

const result = response.json();

这里有个小错误，需要await它：

const result = await response.json();

在您从表单处理程序发布的另一个示例中，它已正确等待，因此可以正常工作。

useEffect 在页面加载错误时调用 API

useEffect calling API on page load errors

api

apollo

reactjs

use-effect