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