ReactJS 记住我组件到钩子

Question

我这里有一个案例，就是在登录的时候做一个remember me的功能。

所以，昨天我在 codesandbox 上获得了一个在线 repo，其中包含 reactjs 组件记住我。

然后我想把它转换成反应钩子。

代码是这样的（React Component 原创）

import React from "react";

class RememberMe extends React.Component {
  static displayName = "RememberMe";

  state = {
    email: "",
    password: "",
    isChecked: false
  };

  componentDidMount() {
    if (localStorage.checkbox && localStorage.email !== "") {
      this.setState({
        isChecked: true,
        email: localStorage.username,
        password: localStorage.password
      });
    }
  }

  onChangeValue = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  onChangeCheckbox = (event) => {
    this.setState({
      isChecked: event.target.checked
    });
  };

  loginSubmit = () => {
    const { email, password, isChecked } = this.state;
    if (isChecked && email !== "") {
      localStorage.username = email;
      localStorage.password = password;
      localStorage.checkbox = isChecked;
    }
  };

  render() {
    const { email, password, isChecked } = this.state;
    return (
      <div>
        <form>
          <table align="center">
            <tr>
              <td>
                <label>Email</label>
              </td>
              <td>
                <input
                  type="email"
                  name="email"
                  value={email}
                  onChange={this.onChangeValue}
                />
              </td>
            </tr>
            <tr>
              <td>
                <label>Password</label>
              </td>
              <td>
                <input
                  type="password"
                  name="password"
                  value={password}
                  onChange={this.onChangeValue}
                />
              </td>
            </tr>
            <tr>
              <td colSpan="2">
                <input
                  type="checkbox"
                  checked={isChecked}
                  name="lsRememberMe"
                  onChange={this.onChangeCheckbox}
                />
                <label>Remember me</label>
              </td>
            </tr>
            <tr>
              <td colSpan="2">
                <input type="button" value="Login" onClick={this.loginSubmit} />
              </td>
            </tr>
          </table>
        </form>
      </div>
    );
  }
}

export default RememberMe;

然而，当它完成后，我试图将它转换成钩子，但它没有正常工作，我想，“我的代码有什么问题吗？谢谢

    import React, { useState, useEffect } from "react";
    
    const Me = () => {
      const [email, setEmail] = useState("");
      const [password, setPassword] = useState("");
      const [isChecked, setIsChecked] = useState(false);
    
      useEffect(() => {
        if (localStorage.checkbox && localStorage.email !== "") {
          setEmail({ email: localStorage.username });
          setPassword({ password: localStorage.password });
          setIsChecked({
            isChecked: true
          });
        }
      }, []);
    
      const onChangeValue = (event) => {
        setIsChecked({
          [event.target.name]: event.target.value
        });
      };
    
      const onChangeCheckbox = (event) => {
        setIsChecked({
          isChecked: event.target.checked
        });
      };
    
      const loginSubmit = () => {
        if (isChecked && email !== "") {
          localStorage.username = email;
          localStorage.password = password;
          localStorage.checkbox = isChecked;
        }
      };
    
      return (
        <div>
          <form>
            <table align="center">
              <tr>
                <td>
                  <label>Email</label>
                </td>
                <td>
                  <input
                    type="email"
                    name="email"
                    value={email}
                    onChange={onChangeValue}
                  />
                </td>
              </tr>
              <tr>
                <td>
                  <label>Password</label>
                </td>
                <td>
                  <input
                    type="password"
                    name="password"
                    value={password}
                    onChange={onChangeValue}
                  />
                </td>
              </tr>
              <tr>
                <td colSpan="2">
                  <input
                    type="checkbox"
                    checked={isChecked}
                    name="lsRememberMe"
                    onChange={onChangeCheckbox}
                  />
                  <label>Remember me</label>
                </td>
              </tr>
              <tr>
                <td colSpan="2">
                  <input type="button" value="Login" onClick={loginSubmit} />
                </td>
              </tr>
            </table>
          </form>
        </div>
      );
    };

export default Me;

https://codesandbox.io/s/remember-me-localstorage-forked-crpt1z

Answer 1

仔细查看您所在州的类型。

与类组件不同，其中有一个 state 对象和各种键，每个状态原子现在都是独立的并且应该只保存值本身，但您正在将对象设置到它们中，例如

setEmail({ email: localStorage.username });

这样的调用应该只是

setEmail(localStorage.username);

等等。

你也不需要useEffect()；只需使用useState 的函数初始化：

import React, { useState } from "react";

function Me() {
  // State, initial state loaded from local storage if set
  const [email, setEmail] = useState(() => (localStorage.checkbox ? localStorage.username : ""));
  const [password, setPassword] = useState(() => (localStorage.checkbox ? localStorage.password : ""));
  const [isChecked, setIsChecked] = useState(() => !!localStorage.checkbox);

  const loginSubmit = () => {
    if (isChecked && email !== "") {
      localStorage.username = email;
      localStorage.password = password;
      localStorage.checkbox = isChecked ? "1" : "";
      alert("Okay!");
    }
  };

  return (
    <div>
      <form>
        <table align="center">
          <tr>
            <td>
              <label>Email</label>
            </td>
            <td>
              <input type="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
            </td>
          </tr>
          <tr>
            <td>
              <label>Password</label>
            </td>
            <td>
              <input type="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            </td>
          </tr>
          <tr>
            <td colSpan="2">
              <input
                type="checkbox"
                checked={isChecked}
                name="lsRememberMe"
                onChange={(e) => setIsChecked(e.target.checked)}
              />
              <label>Remember me</label>
            </td>
          </tr>
          <tr>
            <td colSpan="2">
              <input type="button" value="Login" onClick={loginSubmit} />
            </td>
          </tr>
        </table>
      </form>
    </div>
  );
}