React & Firebase - 使用 Firebase onSnapshot 附加组件

Question

目前，我正在使用一个带有 onClick 功能的按钮来在每次按下 JSX 组件时将其附加到 UI。我还使用了一个带有一些 firebase 数据库逻辑的 useEffect，它是一个 onSnapshot 来实时读取数据以将信息显示到 UI 上。

问题是当用户刷新页面时，附加 JSX 的 onClick 函数会从状态中删除，并且不会在 UI 上显示 firebase 数据。我该如何解决这个问题？

代码：

import React, { useEffect, useState } from "react";
import DashboardBody from "./DashboardComponents/DashboardBody";
import db from "../../firebase";

function Test() {
  const [exercise, setExercise] = useState([]);
  const [count, setCount] = useState(0);

  useEffect(() => {
    db.collection("users").onSnapshot((snapshot) => {
      setExercise(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          exercise: doc.data().exercise,
        }))
      );
    });

    return;
  }, []);

  return (
    <div>
      {[...Array(count)].map((count, index) => (
        <DashboardBody key={index} exercise={exercise} />
      ))}

      <div>
        <button onClick={() => setCount(count + 1)}>Click</button>
      </div>
    </div>
  );
}

export default Test;

Answer 1

count 变量存储在组件的状态中，并在单击按钮时递增。当页面重新加载（或组件卸载并再次安装）时，状态变量会丢失。要保留状态，您必须将其存储在数据库中（或浏览器的存储中），以便在组件再次挂载时可以获取它。