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

Question

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

我想读取数组中的所有值，但它应该像地图一样。 我试过这段代码，但我做不到。 你能帮助我吗？

{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}
                />
              );
            });
          })}

最后，它应该是这样的：

Answer 1

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

要使其工作，请使用 state 和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>
  );
};