我正在尝试学习如何使用 axios 从 jsonplaceholder api 获取数据。我试图从 https://jsonplaceholder.typicode.com/v1/photos 获取图像并将其映射到 img 元素,但我收到“未捕获(承诺)TypeError:images.map 不是函数”错误。我该如何解决这个错误??
import axios from "axios";
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [images, setImages] = useState([]);
const getData = async () => {
const { data: images } = await axios(
"https://jsonplaceholder.typicode.com/photos"
);
setImages({ images });
console.log(images);
};
useEffect(() => {
getData();
}, []);
return (
<div className="App">
Populate with imagse from jsonplaceholder
{images.map((image) => {
return <img src={image.thumbnailUrl} alt={image.title} />;
})}
</div>
);
}
给出的解决方案在 codeSandbox 中有效。 https://codesandbox.io/s/react-json-server-9g7wo?file=/src/VideoCard.js 但在实际应用中仍然给我“未处理的拒绝(类型错误):对象(...)不是函数”错误
答案 0 :(得分:3)
有了这个:
setImages({ images });
您正在将 images
变量设置为具有一个属性 images
的对象,该属性是一个数组,有点像这样:
const imagesForNextRender = {
images: [
/* image data */
]
};
但你不能.map
那样。首先提取 images
属性(不推荐):
images.images.map(
或者,更明智的是,使用数组本身调用 setImages
,而不是将其包装在一个对象中:
const result = await axios("https://jsonplaceholder.typicode.com/photos");
setImages(result.data);