如何使用 Javascript 访问数组中的单个对象

Question

您好，我已经使用来自 Firebase 的 getDocs() 导出了数据（hawkers 集合）。

之后，我将每个 hawker 数据作为一个对象放入名为 allStall 的数组中，如下面的控制台日志屏幕截图所示.

问题 1 - 如何访问 allStall 数组中的每个单独对象。我尝试使用 .map() 访问其中的每一个，但我一无所获。

请注意，我的 allStall 数组中已经有数据，请参见上面的屏幕截图。 [Update] 地图在下面的代码中不起作用，因为字段是 stallname 而不是 stallName。但是，如果 using/call in/from other function.

则需要 async + await

问题 2 - 为什么 [[Prototype]]: Array(0) 在我的 allStall array

export /*Soln add async*/function getAllStall(){
  var allStall = [];
  try
  {
    /*Soln add await */getDocs(collection(db, "hawkers")).then((querySnapshot) =>
      {
        querySnapshot.forEach((doc) =>
          {
            var stall = doc.data();
            var name = stall.stallname;
            var category = stall.category;
            var description = stall.description;

            var stallData = {
              stallName:name,
              stallCategory:category,
              stallDescription:description
            };
            allStall.push(stallData);
});});

     console.log(allStall);

    //Unable to access individual object in Array of objects
    allStall.map(stall =>{console.log(stall.stallName);});}

  catch (e) {console.error("Error get all document: ", e);}

  return allStall;
}

在我的主 js 文件中，我执行了以下操作：

useEffect(/*Soln add await*/() =>
    {
        getAllStall();
        /*Soln:replace the statement above with the code below
        const allStall = await getAllStall();
        allStall.map((stall)=>console.log(stall.stallname));
       */
    }
);

Answer 1

你没有得到任何东西，因为 allStall 是空的，因为你没有等待承诺被履行

试试这个

export const getAllStall = () => getDocs(collection(db, "hawkers"))
       .then((querySnapshot) =>
           querySnapshot.map((doc) =>
              {
                const {stallName, category, description} =  doc.data();
            
            return  {
              stallName:name,
              stallCategory:category,
              stallDescription:description
            };
           
          });
      )

试试这样改变使用效果

useEffect(async () =>
    {
        const allStats = await getAllStall();
        console.log(allStats)
        allStats.forEach(console.log)
    }
);

Answer 2

非常感谢 R4ncid，您给了我灵感！并感谢所有在下面发表评论的人！

我设法用 async 和 await 完成了它。最新更新，我也弄清楚了我以前的代码有什么问题。我在我的问题中评论了解决方案，即向函数添加异步并等待 getDocs。

此外，地图在上面的代码中不起作用，因为字段是 stallname 而不是 stallName。但是，如果使用来自其他函数的 in/calling，则需要异步 + 等待。

辅助函数

export async function getAllStall(){

  const querySnapshot = await getDocs(collection(db, "hawkers"));

  var allStall = [];

  querySnapshot.forEach(doc =>
    {
      var stall = doc.data();
      var name = stall.stallname;
      var category = stall.category;
      var description = stall.description;

      var stallData = {
        stallName:name,
        stallCategory:category,
        stallDescription:description
      };

      allStall.push(stall);
   }
  );

  
  return allStall;
}

主 JS 文件

useEffect(async () =>
        {
            const allStall = await getAllStall();
            allStall.map((stall)=>console.log(stall.stallname));
        }
    );

万岁

如何使用 Javascript 访问数组中的单个对象

How to access individual object in array using Javascript

javascript

asynchronous

promise

reactjs