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

Question

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

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

}

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

提前致谢

拉斐尔

Answer 1

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

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

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

My inputs lose their values when I refresh the page in a React app

javascript

local-storage

reactjs

npm-start

create-react-app