为什么这段代码给我:
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>
)
}
我在你的代码中发现了两个问题。
首先,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)
}
``
您不需要在
response.json()
内传递响应。
useEffect(() => {
async function fetchEmployees() {
const response = await fetch(url)
const fetchedEmployees = await response.json()
setItems(fetchedEmployees)
}
fetchEmployees()
}, [])
由于您的 API 不返回数组,因此您无法在
map
上使用 items
。应该做以下事情
return (
<div>
<li>{items.name}</li>
</div>
)
如果您尝试获取对象数组,您可能应该检查另一个返回字符数组的端点,如下所示https://rickandmortyapi.com/api/character。然后,您可以通过
items.results
进行映射以在组件的 JSX 中输出 name
。