获取数据 react .map 不是一个函数

Question

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

Answer 1

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

首先，API link "https://rickandmortyapi.com/api/character/1" returns 一个对象，不是数组。您不能对对象使用 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)
    }
``

Answer 2

您不需要在 response.json() 内传递响应。

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

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

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

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

获取数据 react .map 不是一个函数

fetch data react .map is not a function

fetch

reactjs

fetch-api

react-hooks

use-effect