在ReactJS(函数组件)中映射和渲染来自API的数据

Question

我正在学习反应。需要映射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

Answer 1

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} />}