reactjs如何在firebase上读取数组中的地图答案

【问题标题】：reactjs how can i read map in array on firebasereactjs如何在firebase上读取数组中的地图
【发布时间】：2021-09-05 06:08:01
【问题描述】：

我有一个数组，在一个数组中我有一张地图。地图有 2 个值，标题和内容。

我想读取数组中的所有值，但它应该类似于 map。我试过这段代码，但我做不到。你能帮帮我吗？

{database.collection("notes")
          .doc(uid)
          .onSnapshot((doc) => {
            doc.data().notes.map((value, index) => {
              return (
                <Note
                  key={index}
                  id={index}
                  title={value.title}
                  content={value.content}
                  onDelete={deleteNote}
                />
              );
            });
          })}

最后应该是这样的：

【问题讨论】：

标签： javascript arrays reactjs firebase dictionary

【解决方案1】：

您的代码的问题在于onSnapshot 使用了callback，它将像Future 一样执行。这意味着如果您将该代码放入 react 并在其周围使用{}，它将不会返回任何内容。

要使其工作，请使用状态和useEffect。您的代码可能如下所示：


import React from "react";
import { useEffect } from "../../../github/ecronix/wc-csv-export/node_modules/@types/react";

const YourComponent = () => {
  const [list, setList] = useState([]);

  useEffect(() => {
    database
      .collection("notes")
      .doc(uid)
      .onSnapshot((doc) => {
        const tempList = [];
        doc.data().notes.map((value, index) => {
          tempList.push({ value, index });
        });

        setList(tempList);
      });
  });

  return (
    <div>
      {list.map(({ value, index }) => {
        return (
          <Note
            key={index}
            id={index}
            title={value.title}
            content={value.content}
            onDelete={deleteNote}
          />
        );
      })}
    </div>
  );
};

【讨论】：