有一个数组,它按元素的数量显示数据,每次callapi接收到作为blob的类型,将其传递给fileReader并返回数据以呈现组件,但数据不显示
export default function App() {
const arr = [
{ name: "A", id: 1 },
{ name: "B", id: 2 },
{ name: "C", id: 3 }
];
const Render = () => {
return arr.map((item) => {
const fetchAttachment = async () => {
try {
const res = await axios.get(`apiURL/${item.id}`, {
responseType: "blob",
headers: defaultHeader
});
let reader = new window.FileReader();
reader.readAsDataURL(res.data);
reader.onload = () => {
let link = reader.result;
return link;
};
} catch (error) {
console.log(error);
}
};
const linkview = fetchAttachment();
return <Item linkview={linkview} />;
});
};
return (
<div className="App">
<Render />
</div>
);
}
export function Item({ linkview }) {
return (
<div>
<p>{linkview}</p>
</div>
);
}
1条答案
按热度按时间q5iwbnjs1#
你正在犯一些错误。
1.您在fetchAttachment()函数中没有返回reader或reader结果。
1.fetchAttachment()是异步函数,因此返回的数据是pending promise。因此,您可以使用**.then()来获取数据。
1.您在未提供键的情况下呈现ListView组件。如果没有键,你会得到一个类似“应该为列表项提供键”的警告。
1.还有一件事,我注意到,您在axios请求中使用了“apiURl”作为字符串**。我认为它是一个具有URL的变量。
下面是更新后的代码。试试这个:
希望对大家有帮助。