React中直接修改state触发react/no-direct-mutation-state问题，如何正确设置登录组件状态？

你遇到的这个ESLint警告是React开发里的常见坑——绝对不能直接修改this.state对象！React的状态设计是不可变的，直接赋值会绕过React的状态更新生命周期，导致组件无法及时重新渲染，还可能引发状态不一致的潜在bug，这也是ESLint规则react/no-direct-mutation-state要禁止这种操作的原因。

正确的做法：用setState()更新状态 #

React类组件提供了专门的setState()方法来处理状态更新，它会帮你自动合并新状态、触发组件重新渲染，完全符合React的状态管理规则。

针对你的代码，只需要把输入框onChange事件里的直接赋值替换成setState()调用即可：

修改后的完整代码 #

import React, { Component } from 'react';
import "../LoginPage/LoginPage.css"
import {auth} from "../firebase";
class SignIN extends Component {
  constructor(props) {
    super(props);
    this.state = {
      emailId : null,
      password: null
    }
  }
  login=()=>{
    auth.signInWithEmailAndPassword(this.state.emailId, this.state.password)
    .then((userCredential) => {
      var user = userCredential.user;
      localStorage.setItem("users",JSON.stringify(user));
      window.location.reload();
    })
    .catch((error) => {
      // 这里可以补充错误提示逻辑，比如alert(error.message)
    });
  }
  render() {
    return (
      <div>
        <input 
          className="logipage__text" 
          onChange={(event) => this.setState({ emailId: event.currentTarget.value })} 
          type="text" 
          placeholder="Phone number, username, or email" 
        />
        <input 
          className="logipage__text" 
          onChange={(event) => this.setState({ password: event.currentTarget.value })} 
          type="password" 
          placeholder="Password" 
        />
        <button className="login__button" onClick={this.login}>Log In</button>
      </div>
    );
  }
}
export default SignIN;

额外小提示 #

如果你的状态更新需要依赖当前的状态值（比如计数器count + 1），那应该使用setState()的函数形式，避免异步更新导致的状态错误：

this.setState(prevState => ({ count: prevState.count + 1 }))

而这次你的场景是直接替换输入值，用对象形式的setState()就足够啦。

这样修改后，ESLint的警告会消失，组件也能正确响应输入变化并更新状态了。

内容的提问来源于stack exchange，提问作者Mama