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

【问题标题】：My inputs lose their values when I refresh the page in a React app当我在 React 应用程序中刷新页面时，我的输入丢失了它们的值
【发布时间】：2021-05-15 19:51:50
【问题描述】：

刷新页面时，我的输入值丢失。

这是一个简单的小型 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>
    )
}

}

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

提前致谢

拉斐尔

【问题讨论】：

所以你需要存储所有的值......不仅仅是状态

标签： javascript reactjs local-storage create-react-app npm-start

【解决方案1】：

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

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

【讨论】：