Datos recibidos de firebase-realtime-database de la siguiente manera
{ "0": { "id": 10250903, ... }, "1": { "id": 10810490, ... }, ... } Código para 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)); }, []);Traté de iterar el objeto para obtener los valores.
products?.forEach((product) => { console.log(product); });Resultado:
Object { "id": 10250903, ... } Object { "id": 10810490, ... } Pero cuando trato de acceder a los valores de id , la consola imprime sin definir
products?.forEach((product) => { console.log(product.id); // undefined }); undefined undefinedEstoy atascado, lo intenté todo.
Object.values(products) no funcionará ya que el producto no estará definido hasta que se reciban los datos.Usted declaró que:
Object.values(products) no funcionará ya que el producto no estará definido hasta que se reciban los datos.
Creo que estás muy cerca de la solución. Uso products || {} maneja el caso en el que los products no están undefined o son null .
var products = { "0": { "id": 10250903, }, "1": { "id": 10810490, }, } Object.values(products || {}).forEach(p => console.log(p.id)) Si está transformando productos en una nueva colección de productos, reduce puede ser útil:
Object.values(products || {}).reduce((acc, p) => { acc[p.id] = p; return acc; }, {})=>
{ "10250903": { "id": 10250903, ... }, "10810490": { "id": 10810490, ... } }O:
Object.values(products || {}).reduce((acc, p) => { acc.push(p.id) return acc; }, []) => [10250903, 10810490]