ReactJs 保留多个react 值，刷新后不重置状态

Posted 2023-02-22

【中文标题】ReactJs 保留多个react 值，刷新后不重置状态

【英文标题】：ReactJs retains multiple react values and do not reset state after being refreshed

【发布时间】：2020-12-31 02:24:06

【问题描述】：

在代码框链接here 我有一个包含多个输入的表单，我想将输入值存储到每个输入的本地存储中，并且每次刷新页面时，每个输入的值仍然存在，当然，当它更改时，localstorage 也会自动更新每个值，感谢您的帮助，祝您有美好的一天，谢谢 :)

p/s：正如你在这张 gif 图片中看到的 ，

我可以将它们的值存储在本地存储中，但我不知道如何在刷新页面时保留输入中的值并更新它。我的想法是克隆 Medium，当用户想写新故事时，它会在 url 参数中自动生成一个新 id，当输入文本 onChange 时，firebase 实时数据库将存储 event.target.value 并将其保存在本地存储中但是当我刷新页面时，文本的状态消失了，我不知道如何处理它，感谢您花时间帮助我，我真的很感激

【问题讨论】：

你知道localstorage，你应该知道如何从localstorage读/写数据。你现在在这里问什么？

但我不知道如何分别根据我从本地存储中存储的内容为每个输入设置值

可能您的每个输入都有一个唯一的 ID，这将是您保存到存储时的关键。

【参考方案1】：

我希望这能回答您的问题，因为输入元素不是受控输入，您可能无法在重新加载时设置输入的预填充值。在浏览器环境中，用户可以控制和不受控制的输入和动作两种类型，当你传递一个值属性并告诉它它的值应该是什么时，输入是受控的，

而对于不受控制的输入，不需要将值作为属性。每当用户输入一个值时，该值都会反映在 UI 中，因为 html 输入元素会将其存储在其本地状态中，以便向用户提供视觉反馈。

当您通过 API 获取一些数据时，受控和非受控输入的概念非常方便，然后您必须使用一些以前从 API 填充的数据自动填充输入。那个时候你也需要输入是受控输入。在您的场景中，它在 localStorage 中而不是 API。 我已经用我的代码更新了您的代码沙箱链接。如果不起作用，请查看并分享。

https://codesandbox.io/s/react-multiple-input-value-demo-forked-tf423?file=/src/Demo.js

请找到一些与受控和非受控输入相关的参考链接：

https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

https://reactjs.org/docs/uncontrolled-components.html

https://www.robinwieruch.de/react-controlled-components

【讨论】：

不知道为什么我们在这里需要受控与不受控制。

因为他无法在重新加载时保持状态。他在 localStorage 中有值，唯一的事情是即使他更新了在输入被控制之前不会反映的状态。

他可以将他的数据存储在本地存储中意味着他已经获得了这个输入的值属性。 x)

不，这不是强制性的，他必须将值存储在 onChange 处理程序的 localStorage 中。

基于您的演示，现在我可以处理我的问题了，它与我的预期完美配合，稍作修改，非常感谢您，希望您有美好的一天

【参考方案2】：

您只需要一个函数来为输入设置本地存储并为每个输入提供唯一的键值，因此您不会覆盖现有值。 比如：

setValue = () => 
    localStorage.setItem(uniqueId, value)

设置值后，刷新页面后不会被删除。 如果您想随时检索这些值，只需使用 localStorage.getItem(key)。 如果您想要在刷新页面时预先写入输入，那么您需要有一个状态来存储组件安装后的初始值：

this.state = 
    input1: ' '
 

componentDidMount() 
    this.setState(
        input1: localStorage.getItem(''inputValue1'')
    )

【讨论】：

也许input1: localStorage.getItem("inputValue1") || "" 来处理空值

非常感谢，我的问题已经解决了，祝你有个美好的一天