获取数据反应 .map 不是函数

Posted 2023-02-27

【中文标题】获取数据反应 .map 不是函数

【英文标题】：fetch data react .map is not a function

【发布时间】：2021-09-16 07:19:51

【问题描述】：

为什么这段代码给我：TypeError: items.map is not a function？

  const [items, setItems] = useState([])

  const url = 'https://rickandmortyapi.com/api/character/1'

  useEffect(() => 
    async function fetchEmployees() 
      const response = await fetch(url)
      const fetchedEmployees = await response.json(response)
      setItems(fetchedEmployees)
    
    fetchEmployees()
  , [])

  return (
    <div>
      items.map((element) => (
        <li>element.name</li>
      ))
    </div>
  )

【问题讨论】：

什么是fetchedEmployees？另外，您为什么将response 传递给response.json？

确保await response.json(response) 为您提供了一个数组，因为.map 只能用于数组。

我复制了“如何从 api 获取”，因为我认为我的代码可能无效并且我没有更改函数的名称

你需要检查 response.status 或 response.ok 或 response.statusText

【参考方案1】：

我在您的代码中发现了两个问题。

首先，API 链接“https://rickandmortyapi.com/api/character/1”返回一个对象，而不是一个数组。您不能将map 用于对象，因为map 是一个数组函数。重新检查 API 的 URL 并相应地调整您的代码以匹配您的值的形状。

其次，对于你的fetchEmployees()函数，你只需要const fetchedEmployees = await response.json()

在这种情况下，我们鼓励您使用“打印调试”——将console.log 放在各处以了解内部工作原理。例如，您可以在此处放置 console.log 以查看您得到了什么（一个对象），您应该了解为什么 map 无法处理它

async function fetchEmployees() 
      const response = await fetch(url);
      const fetchedEmployees = await response.json();
      console.log("fetchedEmployess", fetchedEmployees);
      setItems(fetchedEmployees)
    
``

【参考方案2】：

您无需在response.json() 中传递响应。

useEffect(() => 
    async function fetchEmployees() 
      const response = await fetch(url)
      const fetchedEmployees = await response.json()
      setItems(fetchedEmployees)
    
    fetchEmployees()
  , [])

由于您的 API 不返回数组，因此您不能在 items 上使用 map。以下应该做的

return (
    <div>
        <li>items.name</li>
    </div>
  )

如果您尝试获取对象数组，您可能应该检查另一个端点，该端点返回像 https://rickandmortyapi.com/api/character 这样的字符数组。然后，您可以通过 items.results 映射以在组件的 JSX 中输出 name。

【讨论】：

一个小提示，来自rickandmortyapi.com/api/character 的response 不会立即返回一个数组。字符数组似乎实际上在response.results