我正在嘗試在我的 React Web 應用程式中創建一個按鈕，它將 Firebase Cloud Firestore 資料庫中的所有資料或最好的特定集合匯出為 JSON。
以下是我目前正在使用的內容。這種作業但不正確。當我單擊按鈕并下載 JSON 時，它將為空，因為尚未加載資料。當我第二次單擊該按鈕并再次下載 JSON 時，它將具有所需的資料，因為它是在第一次單擊后加載的。我嘗試了不同的異步和承諾結構來等待所有資料，然后再開始下載，但到目前為止我失敗了。始終可以使用 useEffect 預先下載資料，但這不是一個選項，因為它極大地增加了使用應用程式進行的 Firebase 呼叫。
在下載之前如何正確等待所有資料？有什么不同的方法可以實作這一目標嗎？
function App() {
const [download, setDownload] = useState([])
const downloadLink = useRef()
const downloadMyCollection = async () => {
const myCollection = collection(db, 'myCollection')
const data = await getDocs(myCollection)
setDownload(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
downloadLink.current.click()
}
return (
<div>
<button
className="downloadButton"
onClick={ downloadMyCollection }>
Download Responses
</button>
<a
href={`data:text/json;charset=utf-8,${encodeURIComponent(
JSON.stringify(download)
)}`}
download='export.json'
className='hidden'
ref={downloadLink}>
isHidden
</a>
</div>
)
}
uj5u.com熱心網友回復：
我不知道 100% 是否可行，事實是setStateHook 是異步的，所以即使會在點擊之前運行，當事件運行setDownload時下載狀態將是一個空陣列。click()
我的建議是創建一個監聽下載狀態的 Hooks，并檢查是否不為空，然后觸發 click 事件。
function App() {
const [download, setDownload] = useState([])
const downloadLink = useRef()
const downloadMyCollection = async () => {
const myCollection = collection(db, 'myCollection');
const data = await getDocs(myCollection);
setDownload(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
};
useEffect(() => {
if(!!download.length) downloadLink.current.click();
},[download]}
return (
<div>
<button
className="downloadButton"
onClick={ downloadMyCollection }>
Download Responses
</button>
<a
href={`data:text/json;charset=utf-8,${encodeURIComponent(
JSON.stringify(download)
)}`}
download='export.json'
className='hidden'
ref={downloadLink}>
isHidden
</a>
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/463267.html
標籤：javascript 反应 火力基地 谷歌云火库
上一篇：當資料是物件而不是陣列時，如何通過ReduxToolkit中的ID引數連接到我的狀態？
下一篇：如何在CSS中正確計時影片？