React 在页面刷新后保留输入值，并保存在本地存储中答案

【问题标题】：React retains the input value after the page is refreshed and keeps it in local storageReact 在页面刷新后保留输入值，并保存在本地存储中
【发布时间】：2020-12-30 03:05:51
【问题描述】：

我正在使用 react 做一个功能，它保存输入中的文本并自动更新到本地存储，即使我刷新页面，输入中的文本仍然存在并且状态不会从头开始重置。谢谢你帮助我，祝你有美好的一天。请在以下代码框codesandbox link 中给我一个演示。再来一次非常感谢你

【问题讨论】：

标签： reactjs input frontend local-storage refresh

【解决方案1】：

首先，您要将输入的值存储在反应状态中

const [value, setValue] = useState("");

当输入发生变化时，将变化写入react state，还有localStorage

const handleChange = (e) => {
  setValue(e.target.value);
  localStorage.setItem("inputValue", e.target.value);
};

当组件挂载时，我们想将输入的初始状态设置为localStorage中的值

useEffect(() => {
  setValue(localStorage.getItem("inputValue"));
}, []);

最后，将handler钩子到onChange，并使用React状态作为表单值

<input
  value={value}
  onChange={handleChange}
/>

见：https://codesandbox.io/s/react-input-not-reload-after-refreshing-forked-q84r8?file=/demo.js

【讨论】：

非常感谢，非常直接
我建议您立即设置值：useState(localStorage.getItem("inputValue")。给出相同的结果。我想这是更少的代码，不需要额外的useEffect
不，我仍然使用useEffect，当localstorage的值发生变化时，它会立即更新状态，如果我删除它，它只会渲染前一个组件，因为它可以自动监听变化，useState被设计用于渲染第一个安装的组件
非常感谢马里奥的帮助