时间戳

首页 > 解决方案 > 如何在页面重新加载事件后将 React 组件与子组件保持一致？

javascript - 如何在页面重新加载事件后将 React 组件与子组件保持一致？

问题描述

这更像是一个假设性问题，因为我想在尝试为这个问题编写代码之前有一个清晰的想法。

例如，假设我有Board（父）和Card（子）组件。

Cards 被放置在里面并Board包含一些文本元素（可能是 Todo 项目），并且可以在棋盘内和从棋盘移动到棋盘。因此，状态用于允许用户将卡片从一个棋盘移动到另一个棋盘，然后“检查”一个待办事项，而不是将所有内容重置为原始位置。

但是如果我想在用户重新加载页面后坚持下去会发生什么？

我唯一的选择是localStorage在“字符串化”之后存储所有内容，还是有其他（更好的）替代方案？

我在网上看到很多使用单个组件的示例，您只需存储该组件的状态和文本，但是对于带有子组件的组件，这似乎非常低效和复杂。

标签： javascriptreactjspersistence

解决方案

通常的方法是使用 localStorage。localStorage 如何工作的完整示例，您可以自己更改状态。

const LOCAL_STORAGE_KEY = 'todosvar'

useEffect(() => { 
const storedTodos = JSON.parse(localStorage.getItem
(LOCAL_STORAGE_KEY))
if (storedTodos) setTodos(storedTodos)
}, [])

useEffect(() => { 
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todosvar))
 }, [todosvar])

推荐阅读