[英]Map and Render Data from API in ReactJS (Function Components)
我正在学习反应。 需要从 ReactJS(函数组件)中的 tinyfac.es API 映射 5 个图像。 正在正确获取图像(在控制台中)但无法呈现它。 如果可能,请解释错误。 非常感谢:D
代码:
import axios from "axios";
import React from "react";
import { useState, useEffect } from "react";
let base_url = `https://tinyfac.es/api/data?limit=50&quality=0`;
function Storyslider() {
const [Containers, setContainers] = useState([]);
useEffect(() => {
axios
.get(base_url)
.then((a) => {
console.log(a.data[0].url);
setContainers(a.data.results);
})
.catch((b) => {
console.log(Error);
});
}, []);
return (
<div>
{Containers &&
Containers.map((Contain, index) => (
<img
src={Contain.data[0].url}
alt={Contain.data[0].gender}
key={index}
/>
))}
</div>
);
}
导出默认的 Storyslider; 非常感谢:D
data
对象中没有results
键。 所以这就是为什么您的数据没有正确设置为Containers
状态。
这是您的工作代码:
import axios from "axios";
import React from "react";
import { useState, useEffect } from "react";
let base_url = `https://tinyfac.es/api/data?limit=50&quality=0`;
function Storyslider() {
const [Containers, setContainers] = useState([]);
useEffect(() => {
axios
.get(base_url)
.then((a) => {
console.log(a.data);
setContainers(a.data);
})
.catch((b) => {
console.log(Error);
});
}, []);
return (
<div>
{Containers &&
Containers.map((Contain, index) => (
<img
src={Contain?.url}
alt={Contain?.gender}
key={index}
/>
))}
</div>
);
}
export default Storyslider
如果你想从数组渲染单个图像(或第一张图像),你可以简单地做
{Containers && <img src={Containers[0].url} alt={Containers[0].gender} />}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.