页面重新加载事件后如何在子组件上保留React组件？

问题描述

这更多是一个假设性的问题，因为在尝试编写此问题的代码之前，我希望有一个清晰的主意。

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

Card位于Board内部，内部包含一些文本元素（可能是Todo项），可以在电路板内部和电路板之间移动。因此，状态用于允许用户将卡从一个板移动到另一个板，然后“检查”待办事项，而不将所有内容重置为原始位置。

但是，如果我想在用户重新加载页面后仍然保留该怎么办？

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

我在网上看到了很多带有单个组件的示例，您可以在其中简单地存储该组件的状态和文本，但是对于带有子组件的组件，这似乎效率很低而且很复杂。

解决方法

通常的方法是使用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])