当我重新加载我的页面时，如何不丢失我的道具信息？答案

【问题标题】：How to not lose my information in props when i reaload my pages?当我重新加载我的页面时，如何不丢失我的道具信息？
【发布时间】：2023-01-25 02:15:11
【问题描述】：

我是 React 的新手，我正在研究一种将 Firebase 连接到我的项目的方法。

使用 props 我可以传递一个 ID 并在 firebase 中搜索它，但是当我重新加载我的页面时，所有的 props 都丢失了并且我在图像中有这条消息： The value is Undefined because the props are losing their values

有没有其他方法可以让这些信息不丢失？

我不尝试任何事情，因为我不知道该怎么做。道具中的 ID 将在我的页面上的 useEffect() 中使用。

编辑：

有卡片图片： Cards

这是当我点击卡片“Pinscher”时： The page when i click on Pinscher

但是当我重新加载“Pinscher”页面时，我丢失了通过道具传递的 Id。

【问题讨论】：

有多种方法可以解决这个问题。最适合您的方法取决于您实际在做什么。请显示一些示例代码来说明。
@Code-Apprentice 我的代码太大了，但我可以简单地解释一下，我的页面中有狗卡片，当我单击它时，它会重定向到另一个页面，其中包含有关我单击的狗的一些信息。信息在 firebase 中，具体的 id 在 props 中传递。当我点击它时，我将编辑我的问题并在卡片和页面上放置一些图像。

标签： reactjs react-hooks react-props

【解决方案1】：

我知道通过重新加载持久保存数据的最直接方法是将其保存到 localstorage 或 sessionstorage。使用哪一个——以及它是否合适——取决于你的实际用例，如果不了解你的项目，我们无法评论。

假设你确实想使用它，一个基本的实现是在你设置状态时编写辅助函数来将数据保存到存储中。然后，您的初始状态加载将查找存储信息作为其默认值，如果在存储中找不到任何内容，则回退到 null。

  const [arbData, setArbData] = useState(window.localStorage.getItem('arbData'));

  const setArbDataWrapper = (data) => {
    setArbData(data);
    window.localStorage.set('arbData', data);
  }

【讨论】：

嘿，谢谢你的帮助，我编辑了我的问题，并放了一些关于我的项目和正在发生的事情的图片。这些图像可以帮助识别问题。