Javascript 反应&；Firebase-使用Firebase onSnapshot附加组件

目前，我正在使用一个带有onClick函数的按钮，以便在每次按下JSX组件时将其附加到UI中。我还将useffect与一些firebase数据库逻辑结合使用，这是一个onSnapshot，用于实时读取数据，将信息显示在UI上

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

代码：

import React，{useffect，useState}来自“React”；
从“/DashboardComponents/DashboardBody”导入仪表板主体；
从“../../firebase”导入数据库；
功能测试（）{
const[exercise，setExercise]=useState（[]）；
const[count，setCount]=useState（0）；
useffect（（）=>{
db.collection（“用户”）.onSnapshot（（快照）=>{
排练(
snapshot.docs.map（（doc）=>({
id:doc.id，
练习：doc.data（）。练习，
}))
);
});
返回；
}, []);
返回(
{[…数组（计数）].map（（计数，索引）=>(
))}
设置计数（计数+1）}>单击
);
}
导出默认测试

变量

count

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

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

非常感谢，我将研究这些方法并尝试将其应用于我的代码：）非常感谢，我将研究这些方法并尝试将其应用于我的代码：）