长度显示0，即使使用async和await关键字

Question

我不知道发生了什么，但即使使用async和await关键字后，长度仍然显示为零。提前谢谢。

const commercial_shoots = [];
let test;
React.useEffect(() => {
async function fetchData() {
const app_ref = ref(storage, "Home/");
await listAll(app_ref)
.then((res) => {
res.items.forEach((itemRef) => {
getDownloadURL(itemRef).then((url) => {
commercial_shoots.push({ img: url });
});
});
})
.catch((error) => {
console.log(error);
});
}
fetchData();
}, []);
return <div>{commercial_shoots.length}</div>;
};

Answer 1

React仅在state或props更新时才重新呈现组件。在这里，您只更新了一个局部变量。因此，即使它更新了，UI也不会反映更改。

解决方案是使用commercialShoots作为组件中的状态。

const CommercialShoots = () => {
const [commercialShoots, setCommercialShoots] = useState([]);
useEffect(() => {
async function fetchData() {
try {
const app_ref = ref(storage, "Home/");
const res = await listAll(app_ref);
const downloadUrls = await Promise.all(res.items.map(itemRef) => getDownloadURL(itemRef));
const mappedUrlsToImg = downloadUrls.map((url) => ({ img: url });
setCommercialShoots(mappedUrlsToImg);
} catch (error) {
console.error(error);
}
}
fetchData();
}, []);
return <div>{commercial_shoots.length}</div>;
};

注意-由于我们广泛使用async / await，我冒昧地将.then()语法更新为async / await语法。