将基于类的组件转换为功能组件

Question

我想将这个类转换为基于函数的组件以便学习它们

  componentWillMount() 
  {
    if(localStorage.getItem('IsLogin') === '1')
    {
        this.setState({isLogin:true});
    }
  }
  setAuth = (userObject) =>
  {
      this.setState({isLogin:true});
      localStorage.setItem('IsLogin',1);
      localStorage.setItem('user',JSON.stringify(userObject));
      
  }

  setDestroyAuth = () =>
  {
      this.setState({isLogin:false});
      localStorage.removeItem("IsLogin");
      localStorage.removeItem("user");
  }

Answer 1

您可以尝试这种方式并将基于类的组件转换为功能性基础组件。您可以在functional component 中使用React Hooks 进行状态管理。 hooks-intro

例子：

import React, { useEffect, useState } from "react";

const App = (props) => {
  const [state, setState] = useState({ isLogin: false });

  useEffect(() => {
    if (localStorage.getItem("IsLogin") === "1") {
      setState({ ...state, isLogin: true });
    }
  }, []);

  const setAuth = (userObject) => {
    setState({ ...state, isLogin: true });
    localStorage.setItem("IsLogin", 1);
    localStorage.setItem("user", JSON.stringify(userObject));
  };

  const setDestroyAuth = () => {
    this.setState({ ...state, isLogin: false });
    localStorage.removeItem("IsLogin");
    localStorage.removeItem("user");
  };

  return (
    <div className="row">
      Auth status : {state.isLogin}
      <div>
        <button onClick={setAuth}>Set Auth</button>
        <button onClick={setDestroyAuth}>Destroy Auth</button>
      </div>
    </div>
  );
};

export default App;

Answer 2

试试这个方法:)

const [isLogin, setIsLogin] = React.useState(false) // declare it as bool instead object

React.useEffect(() => {
  if(localStorage.getItem('IsLogin') === '1')
   {
     setIsLogin(true)
   }
}, [])

setAuth = (user) => {
  setIsLogin(true)
  localStorage.setItem('IsLogin',1);
  localStorage.setItem('user',JSON.stringify(user))
}

setDestroyAuth = () => {
  setIsLogin(false)
  localStorage.removeItem("IsLogin");
  localStorage.removeItem("user");
}