我正在學習反應。需要從 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
uj5u.com熱心網友回復：
物件results內部沒有鍵data。所以這就是為什么您的資料未正確設定為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} />}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/359666.html
標籤：javascript 反应 接口 休息