forEach 对象值等于未定义
forEach objects value equals undefined
从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)
将不起作用,因为在收到数据之前产品将是未定义的。- 创建一个新的数组并映射到它也不起作用。
您说:
Object.values(products) will not work since product will be undefined until data is received.
我认为您已经非常接近解决方案了。
使用 products || {}
处理 products
是 undefined
或 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]