Firebase 数据库集合渲染列表答案

【问题标题】：Firebase database collection rendering ListFirebase 数据库集合渲染列表
【发布时间】：2022-02-18 18:22:20
【问题描述】：

我在我的项目中使用 Firebase 数据库。当我检索我的数据时，有效负载如下所示：

{
   -randomId123: {name: "foo", surname: "bar" },
   ....
}

如何在组件中正确呈现列表：

export const App = () => {
  const [data, setData] = useState(dummyData);

  const items = data.map((v) => {
      console.log(v.val())
  });

 setData(items)

  return (
    <div>
      <> {data.map((d) => {
              <p> {d.key} {d.name} {d.surname} </p>
  })} </>
    </div>
  );
};

预期输出：

<p> randomId123 foo bar <p>

对象作为 React 子对象无效（找到：带键的对象 {-randomId123，-randomId456，-randomId789}）。如果你打算渲染一个孩子的集合，请改用数组。

【问题讨论】：

标签： javascript arrays reactjs firebase firebase-realtime-database

【解决方案1】：

以下是object。

{
   -randomId123: {name: "foo", surname: "bar" },
   ....
}

如果这是data，那么可能无法使用data.map() 进行迭代。

为了渲染：

<p> randomId123 foo bar <p>

请尝试以下：

<div>
  {Object.keys(data).map(k => (
    <p> {k} {data[k].name} {data[k].surname} </p>
  )}
</div>

【讨论】：