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)将无法工作，因为在数据是received.
• Creating之前，产品将无法定义，而映射到它的映射也不起作用。

Answer 1

你说：

Object.values(产品)将无法工作，因为产品将在收到数据之前未定义。

我认为你非常接近解决方案。使用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]