反应复选框组件未将状态保存到 LocalStorage答案

【问题标题】：React Checkbox Component not saving state to LocalStorage反应复选框组件未将状态保存到 LocalStorage
【发布时间】：2021-10-16 06:14:12
【问题描述】：

我正在 React 中创建一个包含复选框的组件。我希望它来回切换（打开和关闭）并将状态保存在本地存储中，因此如果我转到另一个页面，切换将设置为之前的状态。

注意：我没有使用 React 16，不能使用状态钩子

我创建了我的组件并添加了ComponentDidMount 和ComponentDidUpdate 函数，如下所示。

import * as React from "react";
import { Checkbox } from 'semantic-ui-react'

type Props = {
    label : string
}

type State = {
    status: boolean
}



class ChangeOrder extends React.Component<Props, State> {
    constructor(props) {
        super(props);
        this.state = {
            status: false
        }
    }

    componentDidMount() {
        localStorage.getItem('status') && this.setState({
            status: JSON.parse(localStorage.getItem('status'))
        })
    }

    

    componentDidUpdate(nextProps, nextState) {
        localStorage.setItem('status', JSON.stringify(nextState.status));
    }
    render() {
        return (
            
            <Checkbox
                
                onClick={() => this.setState({ status: !status })}
                label={this.props.label}        
                toggle

            />
        );
    }
}

export default ChangeOrder;

复选框有效，但不保存状态。

当我右键单击检查并转到 Application 并导航到 LocalStorage 时，我看到切换开关的值从 false 变为 true，但再次单击它不会返回 false。

我希望能够保存并保持真假之间的切换按钮状态。

【问题讨论】：

标签： javascript reactjs local-storage state react-component

【解决方案1】：

我认为您的 Checkbox 点击功能中缺少 this.status 改变

onClick={() => this.setState({ status: !status })}

到

onClick={() => this.setState({ status: !this.state.status })}

【讨论】：

【解决方案2】：

您只需将点击事件的状态从状态设置为this.state.status，将status 值传递给checked 属性以确保输入具有预期值。另外，我不喜欢使用字符串化布尔值，而是将字符串布尔值评估为布尔类型。我构建了一个应用程序来检查codesandbox。

【讨论】：

嗨，谢谢，这使它在本地存储中从 false 变为 true，然后又回到 false，但是如果我要刷新页面，如何使其保持该状态？
好的，我更新了codesandbox，根据您的回复，它现在可以正常工作了。请检查那里的组件。