当我在 React 应用程序中刷新页面时，我的输入丢失了它们的值

如何解决当我在 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>
    )
}

}

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

提前致谢

拉斐尔

解决方法

当您刷新页面时，它会破坏组件，当页面重新加载时，它会再次呈现具有初始状态的组件。如果你想在页面刷新时保持状态，你可以像你对​​ showForm 做的一样（使用本地存储）。

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