时间戳

首页 > 解决方案 > 获取数据反应 .map 不是函数

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

问题描述

为什么这段代码给我：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>
  )
}

标签： reactjsreact-hooksfetchfetch-apiuse-effect

解决方案

我在您的代码中看到了两个问题。

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

其次，对于您的fetchEmployees()功能，您只需要const fetchedEmployees = await response.json()

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

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

推荐阅读