forEach 对象值等于未定义

Question

从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) 将不起作用，因为在收到数据之前产品将是未定义的。
创建一个新的数组并映射到它也不起作用。

Answer 1

您说：

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]

forEach 对象值等于未定义

forEach objects value equals undefined

javascript

json

object

firebase-realtime-database