useEffect 获取 Blizzard API答案

【问题标题】：useEffect to fetch Blizzard APIuseEffect 获取 Blizzard API
【发布时间】：2021-04-17 17:28:41
【问题描述】：

我正在尝试使用 useEffect 作为我的钩子在 Blizzard API 上进行获取。通话成功，但是当我尝试设置我的 key={item.id} 然后尝试通过 {item.race} 提取我想要的信息时，我得到了

Failed to compile
./src/App.js
SyntaxError: /Users/gabrielcastro/Development/code/React/convergence/src/App.js: Unexpected token, expected "," (12:2)

  10 |   .then(response => response.races.json())
  11 |   .then(console.log(response.json())
> 12 |   },[races]) 
     |   ^
  13 |  
  14 | 
  15 |   return (

这就是我的代码的样子...我为这篇文章取出了访问令牌。

import React, { useState, useEffect } from 'react'

export default function App() {

  const [races, setRaces] = useState('races')
  const [items, setItems] = useState([])
  
  useEffect(() => {
  fetch(`https://us.api.blizzard.com/data/wow/playable-race/index?namespace=static-us&locale=en_US&access_token=`)
  .then(response => response.races.json())
  .then(console.log(response.json())
  },[races]) 
 

  return (
    <div>
    {items.map(item => {
   <li key={item.id}>
    Race: {item.name}
  </li>
  })}
     </div> 
     )
    }

以下是我试图访问的信息的片段

感谢任何帮助！

【问题讨论】：

您要返回地图中的列表项吗？我认为您应该删除{} 或添加return
是的，我正在尝试退货，我尝试了有无 -- return (
{items.map(item => { return
Race : {item.name}

//映射到 JSON ) }

【解决方案1】：

.map() 方法仅适用于数组。您尝试访问的数据可能是一个对象。您需要深入到 races 键，它包含您需要的数据，实际上是一个数组，因此您应该能够在其上运行 .map()。

您能否尝试将您所在州的races 属性设置为response.races 之类的东西以隔离您要使用的数据，然后再试一次。

【讨论】：

我试图将状态更改为const [response.races, setRaces] = useState('races')，但现在编译失败
在第一个.then() 中，执行console.log(response.json()) 并用你得到的内容更新你的问题（实际代码不是截图）。您在尝试我的建议时遇到了什么错误？
你做错地方了。我的意思是这样的：.then(response => response.races.json())
好的，我用尝试使用.then(response => response.races.json()) 时遇到的新错误更新了问题
好的，把一切都改回你第一次提问时的样子，然后试试.then(json => setItems(json.races))