React 如何判断输入框是否为空以动态切换应用对应指定class类名

错误原因 #

你在useEffect中直接修改普通局部变量emailIsEmpty、passwordIsEmpty，React组件每次重新渲染时，所有局部变量都会被重置回初始值，且useEffect的执行时机晚于渲染逻辑，导致渲染时拿到的永远是初始的null值，修改后的值也会在下次渲染时丢失，这就是报错的核心原因。

最优解决方案 #

你的需求完全不需要使用useEffect，email和password本身就是存在useState中的响应式状态，直接在渲染时计算空值状态即可，代码可以大幅简化：

1. 删掉你声明的两个普通变量emailIsEmpty、passwordIsEmpty
2. 删掉两个对应的useEffect逻辑
3. 直接在绑定className的位置做判断，或者提前定义计算变量即可，同时顺手修正了原代码中i标签用class不符合React规范的问题。

修正后的完整代码：

import { useState } from "react";
import { Link } from "react-router-dom";

const LoginView = function () {
  const [formState, setFormState] = useState({
    email: "",
    password: "",
  });

  const { email, password } = formState;

  const handleInputChange = function (e) {
    setFormState({
      ...formState,
      [e.target.name]: e.target.value,
    });
  };

  // 直接计算空值状态即可，不需要useEffect
  const emailIsEmpty = email === "";
  const passwordIsEmpty = password === "";

  return (
    <div className="container">
      <div className="card-login">
        <div className="card-img">
          <img src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" alt="profile-img" className="profile-img-card" />
          <h1>Login</h1>
        </div>
        <form>
          <div className="form-input">
            <span className={emailIsEmpty ? "icon" : "icon actived"}>
              <i className="fas fa-envelope-open-text"></i>
            </span>
            <input name="email" placeholder="Email address" type="email" onChange={handleInputChange} value={email} />
          </div>
          <div>
            <div className="form-input">
              <span className={passwordIsEmpty ? "icon" : "icon actived"}>
                <i className="fas fa-key"></i>
              </span>
              <input name="password" placeholder="Password" type="password" onChange={handleInputChange} value={password} />
            </div>
          </div>
          <div>
            <button className="button response">Login</button>
          </div>

          <div className="forget-password">
            <Link to="/">Forgot password?</Link>
          </div>
        </form>
      </div>
    </div>
  );
};

export default LoginView;

内容的提问来源于stack exchange，提问作者Emma R.