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));
  }, []);

我試圖迭代 object 來獲取值

products?.forEach((product) => {
              console.log(product);
});

結果：

Object {
  "id": 10250903,
  ...
}
Object {
  "id": 10810490,
  ...
}

但是當我嘗試訪問id值時，控制台打印 undefined

products?.forEach((product) => {
              console.log(product.id); // undefined
});

undefined
undefined

我被困住了，我嘗試了一切。

• Object.values(products)將不起作用，因為在收到數據之前產品將是未定義的。
• 創建一個新數組並映射到它也不起作用。

Answer 1

你說：

Object.values(products) 將不起作用，因為在收到數據之前產品將是未定義的。

我認為您非常接近解決方案。 使用products || {} 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]