Блог

В настоящее время я использую кнопку с функцией onClick для добавления компонента JSX в пользовательский интерфейс при каждом его нажатии. Я также использую эффект использования с некоторой логикой базы данных firebase, которая представляет собой onSnapshot, позволяющий выполнять оперативное считывание данных для отображения информации в пользовательском интерфейсе.

Проблема в том, что когда пользователь обновляет страницу, функция onClick, добавляющая JSX, удаляется из состояния и не отображает данные 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; 

count Переменная сохраняется в состоянии компонента и увеличивается при каждом нажатии кнопки. Когда страница перезагружается (или компонент размонтируется и монтируется снова), переменная состояния теряется. Чтобы сохранить состояние, вам придется сохранить его в базе данных (или в хранилище браузера), чтобы вы могли извлечь его при повторном монтировании компонента.