React.JS 开启页面刷新的状态持久化

Question

我试图让我的切换开关在 React.JS 中刷新页面时保持其状态。我查看了本地存储，但我不确定如何正确实施它。

目前，我正在创建语义切换开关并将其作为一个组件添加到我的子标题中。

这是我的拨动开关组件

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

type Props = {
    label : string
}

class ToggleSwitch extends React.Component<Props> {
    state = { status: false }
    render() {
        return (
            <Checkbox
                onClick={() => this.setState({ status: !status })}
                label={this.props.label}        
                toggle

            />
        );
    }
}

export default ToggleSwitch;

这是我的子标题 class，我在其中调用组件

import * as React from "react";
import ToggleSwitch from './new_layout/ToggleSwitch'




interface Props {
    name: string;
  renderAction?: () => any;
}



const SubHeader: React.SFC<Props> = ({ name, renderAction }) => {
    return (
        <div className="settings-submenu">
            <div className="settings-submenu-name">{name}</div>
            <div className="settings-submenu-name">{renderAction && renderAction()}</div>
            <ToggleSwitch label = "Enable New Layout"/>

        </div>
  );
};

export default SubHeader;

Answer 1

我认为你可以通过以下方式实现它：

正在检查 componentDidMount 或 useEffect 挂钩（我建议您使用适合您的情况的功能组件和挂钩）localStorage 上的切换键。
存在则加载，不存在则创建
在单独的函数中处理 setToggle 以更新 localState 和 localStorage。

这里：

import React, { useEffect, useState } from "react";
import { Checkbox } from "semantic-ui-react";

type Props = {
  label: string;
};

function ToggleSwitch(props: Props) {
  const [toggle, setToggle] = useState(false);

  useEffect(() => {
    // check when the component is loaded
    const localStorageToggled = localStorage.getItem("toggled");

    // If is not null
    if (localStorageToggled) {
      setToggle(localStorageToggled === "true" ? true : false);
    } else {
      // If null set the localStorage key/value as a string.
      localStorage.setItem("toggle", `${toggle}`);
    }
  }, []);

  const handleToggle = (toggle: boolean) => {
    localStorage.setItem("toggle", `${toggle}`);
    setToggle(toggle);
  };
  return (
    <Checkbox
      onClick={() => handleToggle(!toggle)}
      label={props.label}
      toggle
    />
  );
}

export default ToggleSwitch;

Link: https://codesandbox.io/s/flamboyant-einstein-jy6h3?file=/src/new_layout/ToggleSwitch.tsx:0-883 视频：https://streamable.com/0nkgub

React.JS 开启页面刷新的状态持久化

React.JS State persistence for switch on page refresh

javascript

persistence

state

local-storage

reactjs