在响应中显示数组中的 API 数据

Question

我想知道如何着手显示来自 API 响应的一些数据。

上图是我正在处理的 API 响应。我能够获取名称并显示它，以及封面 URL、ID 和摘要。但是，当涉及到类型和平台时，我不确定如何进入这些数组以获取对象。

这是我分配这些值的方式。

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

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

下面是我显示这些结果的方式：

<div key={game.gameId}>
                        <div className='myHeader'>
                            <h2>
                                {game.name}
                            </h2>
                        </div>

                        <div>
                            <img src={'http:' + game.cover.url} alt={`The cover for ${game.name}`}></img>
                        </div>

                        <div>
                            Genre: {game.genres.name}
                        </div>
                    </div>

这不会在控制台中翻转任何错误，但我很确定我实际上没有对响应中的“流派”数组做任何事情。我认为分配不当。

此 post 代码略显浅显（我认为问题出在我 post 编辑的内容上），但如果有所不同，API 调用在 useEffect 挂钩中。我很乐意添加任何可以帮助任何人的代码！

我的问题是，如何解构数组以分配我想要的值？

Answer 1

您正确地分配了 genres 的值，问题在于您如何访问这些值。

您正在尝试访问 name 键，但 genres 是一个数组。

您应该为每个项目映射 genres 和 return 一个 HTML 元素：

{game.genres.map(genre => (<p>{genre.name}</p>) )}

在响应中显示数组中的 API 数据

Displaying API data from an array within the response

reactjs

use-effect