收到的資料firebase-realtime-database如下
{
"0": {
"id": 10250903,
...
},
"1": {
"id": 10810490,
...
},
...
}
代碼到setProducts
const [products, setProducts] = useState();
const {isLoading, setIsLoading} = useData();
useEffect(async () => {
setIsLoading(true);
await firebase
.database()
.ref('events')
.once('value')
.then((events) => {
setProducts(events);
})
.finally(() => setIsLoading(false));
}, []);
我試圖迭代物件以獲取值
products?.forEach((product) => {
console.log(product);
});
結果：
Object {
"id": 10250903,
...
}
Object {
"id": 10810490,
...
}
但是當我嘗試訪問id值時，控制臺列印未定義
products?.forEach((product) => {
console.log(product.id); // undefined
});
undefined
undefined
我被困住了，我嘗試了一切。
Object.values(products)將不起作用，因為在收到資料之前產品將是未定義的。- 創建一個新陣列并映射到它也行不通。
uj5u.com熱心網友回復：
你說：
Object.values(products) 將不起作用，因為在收到資料之前產品將是未定義的。
我認為您非常接近解決方案。使用products || {}處理productsareundefined或的情況null。
var products = {
"0": {
"id": 10250903,
},
"1": {
"id": 10810490,
},
}
Object.values(products || {}).forEach(p => console.log(p.id))
如果您正在將產品轉換為新的產品系列，reduce 可能會變得有用：
Object.values(products || {}).reduce((acc, p) => {
acc[p.id] = p;
return acc;
}, {})
=>
{
"10250903": {
"id": 10250903,
...
},
"10810490": {
"id": 10810490,
...
}
}
或者：
Object.values(products || {}).reduce((acc, p) => {
acc.push(p.id)
return acc;
}, [])
=>
[10250903, 10810490]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/480992.html