不要直接改变状态。使用 setState() 反应/无直接突变状态问题 [重复]

Question

我正在尝试设置用户输入的电子邮件、电话、用户名存在于 登录时的数据库，并喜欢使用 using 访问该值 onChange={(event)=>{this.state.emailId=event.currentTarget.value}} 但是 我遇到了问题。如何设置状态？

SignIN.js

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=()=>{
        // localStorage.setItem("users","admin");
        // window.location.reload();
        auth.signInWithEmailAndPassword(this.state.emailId, this.state.password)
            .then((userCredential) => {
                // Signed in
                var user = userCredential.user;
                localStorage.setItem("users",JSON.stringify(user));
                window.location.reload();
                // ...
            })
            .catch((error) => {
                //var errorCode = error.code;
               // var errorMessage = error.message;
            });
    }

    render() { 
        return ( 
        <div>
             <input className="logipage__text" onChange={(event)=>{this.state.emailId=event.currentTarget.value}} type="text" placeholder="Phone number, username, or email" />
             <input className="logipage__text" onChange={(event)=>{this.state.password=event.currentTarget.value}}  type="password" placeholder="Password" />
             <button className="login__button" onClick={this.login}>Log In</button>
        </div> 
    );
    }
}
 
export default SignIN;

我在以下几行遇到问题：

<input className="logipage__text" onChange={(event)=>{this.state.emailId=event.currentTarget.value}} type="text" placeholder="Phone number, username, or email" />
             <input className="logipage__text" onChange={(event)=>{this.state.password=event.currentTarget.value}}  type="password" placeholder="Password" />
             <button className="login__button" onClick={this.login}>Log In</button>

Answer 1

你可以做这样的事情：

onChange={(event)=>{this.setState((prevState) => ({emailId: event.currentTarget.value, ...prevState}))}}

在此处阅读有关状态的更多信息（对于类，在您的情况下）： https://es.reactjs.org/docs/state-and-lifecycle.html