首頁猿問 useEffect 在進行...

useEffect 在進行 firestore 調用時覆蓋狀態而不是附加值

JavaScript

皈依舞 2022-12-18 16:32:28

const [data, setData] = useState([]) const getDataFromFirebase = async () => { let response = await firestore.collection('someDatabase').get() response.forEach(item => setData([...data, item.data().name])) } useEffect(() => { getDataFromFirebase() },[])數據被最新值覆蓋，而不是將所有值添加到數組中。

查看完整描述

4 回答

一只甜甜圈

TA貢獻1836條經驗獲得超5個贊

原因是添加項目所花費的時間非常少，這就是為什么在反映之前，它被覆蓋了。您必須在 setData 中使用 prevState 。試試這個：

const [data, setData] = useState([])

const getDataFromFirebase = async () => {

let response = await firestore.collection('someDatabase').get()

response.forEach(item => setData(prevState => ([

...prevState, item.data().name])

);

}

useEffect(() => {

getDataFromFirebase()

},[])

反對回復 2022-12-18

寶慕林4294392

TA貢獻2021條經驗獲得超8個贊

在中使用回調setData

setData(prevState => ([

...prevState, item.data().name

]));

反對回復 2022-12-18

12345678_0001

TA貢獻1802條經驗獲得超5個贊

let response = await firestore.collection('someDatabase').get()

response.forEach(item => setData([...data, item.data().name]))

我不熟悉firestore，但是這個承諾將被解決一次，你應該做這樣的事情：

const dataToAdd = response.map(item => item.data().name)

setData(prevState => ([...prevState, ...dataToAdd])

每次setData調用時您都在重新渲染組件，您不應該在同步循環中執行此操作。

prevState在這里是必需的，因為您正在使用異步函數。dataToAdd從理論上講，如果您不在其他任何地方更改狀態，則在使用解決方案后它應該可以在沒有它的情況下工作。

反對回復 2022-12-18

楊魅力

TA貢獻1811條經驗獲得超6個贊

[]在您下面的代碼中，即使您稍后更改數據，數據的值也將始終存在。

const getDataFromFirebase = async () => {

let response = await firestore.collection('someDatabase').get()

response.forEach(item => setData([...data, item.data().name]))

}

這就是文檔所說的

在功能組件的主體（稱為 React 的渲染階段）內不允許發生突變、訂閱、計時器、日志記錄和其他副作用。這樣做會導致 UI 中出現令人困惑的錯誤和不一致。

在每個循環中調用 setData 不是一個好主意。填充一個數組并將其傳遞給setData循環完成后。

const getDataFromFirebase = async () => {

let response = await firestore.collection('someDatabase').get();

let newData = [];

response.forEach(item => newData.push(item.data().name));

// now set the new data

setData(prevData=> ([...prevData, ...newData]));

// or you can use Array.concat

// setData(prevData=> (prevData.concat(newData)));

}

反對回復 2022-12-18

4 回答
0 關注
156 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

useEffect 在進行 firestore 調用時覆蓋狀態而不是附加值

useEffect 在進行 firestore 調用時覆蓋狀態而不是附加值

4 回答

添加回答