Javascript 当我在React应用程序中刷新页面时，输入值将丢失

当我刷新页面时，输入值将丢失

它是一个简单的小React应用程序，反映了我在一个更大的应用程序中所做的事情，只有一个组件

我在组件中定义了一个状态，用于保存输入值（名称和电子邮件）

有一个按钮可以切换包含这两个输入的表单的表示

我使用本地存储来保留切换的值，因为我不想在刷新页面时丢失它

问题是当我刷新页面时，我的两个输入丢失了它们的值，但状态保持正确

这是密码

import React, { Component } from 'react'

export default class AComponent extends Component {
constructor() {
    super()
    this.state = {
        input:{
            name: '',
            email: ''
        },
        showForm: false
    }
}

componentDidMount() {
    localStorage.setItem("showForm", 'false')
}

componentDidUpdate() {
    this.showElements()
}

handleShowForm= (e) => {
    let storageValue = this.state.showForm
    localStorage.setItem("showForm", storageValue ? 'false' : 'true')
    this.setState({input:{...this.state.input}, showForm: !this.state.showForm})
}

handleFormInputs = (e) => {
    this.setState({input:{...this.state.input, [e.target.name]: e.target.value}, 
        showForm: this.state.showForm})
}

showElements = () => {
    if (localStorage.getItem("showForm") === 'true') {
        return (
            <div>
                <form>
                    <label>name</label>
                    <input 
                        name="name" 
                        type="text" 
                        value={this.state.input.name}
                        onChange={this.handleFormInputs} 
                        required>
                    </input>
                    <label>email</label>
                    <input 
                        name="email" 
                        type="email" 
                        value={this.state.input.email}
                        onChange={this.handleFormInputs} 
                        required>
                    </input>                   
                </form>
            </div>
        )
    }
}

render() {
    return (
        <div>
            <button onClick={() => this.handleShowForm()}>Toggle ShowElements</button>
            {this.showElements()}
        </div>
    )
}

import React，{Component}来自“React”
导出默认类AComponent扩展组件{
构造函数（）{
超级（）
此.state={
输入：{
名称：“”，
电子邮件：“”
},
展示形式：假
}
}
componentDidMount（）{
setItem（“showForm”，“false”）
}
componentDidUpdate（）{
this.showElements（）
}
handleShowForm=（e）=>{
让storageValue=this.state.showForm
localStorage.setItem（“showForm”，storageValue？'false'：'true'）
this.setState（{input:{…this.state.input}，showForm:！this.state.showForm}）
}
handleFormInputs=（e）=>{
this.setState（{input:{…this.state.input，[e.target.name]：e.target.value}，
showForm:this.state.showForm}）
}
showElements=（）=>{
if（localStorage.getItem（“showForm”）=“true”）{
返回(
名称
电子邮件
)
}
}
render（）{
返回(
this.handleShowForm（）}>切换ShowElements
{this.showElements（）}
)
}

}

我在这里遗漏了什么，为什么这两个输入会丢失它们的值

提前谢谢

---

Rafael

当您刷新页面时，它会销毁组件，当页面重新加载时，它会再次以初始状态呈现组件。如果希望在页面刷新时保持该状态，可以执行与showForm相同的操作（使用本地存储）

---

另一种选择是，您可以查看服务器端渲染（使用第三方库在服务器上存储组件的状态并将其推送到客户端）。

因此，您需要存储所有值……而不仅仅是状态