重新渲染 Reactjs 后，父组件立即失去状态

Question

我是 React 的新手，我正在尝试编写一个在启动时自动显示登录页面的应用程序，当用户成功登录时，父组件会更新其状态以呈现 Dashboard 组件而不是 Login .

我发现当用户登录时，它会正确更新父组件状态并显示仪表板组件一秒钟，但随后其状态再次更改并重新呈现登录组件。我认为某些原因导致状态重置，但我不确定是什么原因。

用户.js：

class User extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            isLoggedIn: false
        }

        this.updateUser = this.updateUser.bind(this);
    }

    updateUser(newEmail) {
        console.log(`Entered User.updateUser, email: ${newEmail}`);
        this.setState({
            email: newEmail,
            isLoggedIn: false
        });
    }

    render() {
        if (this.state.isLoggedIn) {
            return <Dashboard/>
        }

        return <Login updateTheUser={this.updateUser}/>
    }
}

export default User;

登录.js：

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
        };

        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleResponse = this.handleResponse.bind(this);
    }

    handleEmailChange(event) {
        this.setState({email: event.target.value})
    }

    handlePasswordChange(event) {
        this.setState({password: event.target.value})
    }

    handleResponse(res) {
        if (res.ok) {
            alert('Login Successful!');
            this.props.updateTheUser(this.state.email);
        }
        else if (res.status === 401) {
            alert('Wrong Username or Password');
        }        
    }

    async sendLoginRequest(data) {
        await fetch('http://localhost:8000/login/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json'},
            body: data,
        })
        .then(this.handleResponse)
        .catch(function(error) {
            alert('Server error, please try again.');
            console.error(error);
        });
    }

    handleSubmit(event) {
        const data = `{"email": "${this.state.email}", "password": "${this.state.password}"}`
        this.sendLoginRequest(data);
    }

    render () {
        return (
            <div id="container" className="col-md-12" align="center">
                <div id="vertical-center-div"className="col-sm-4 card bg-light">
                    <Form onSubmit={this.handleSubmit}>
                        <Form.Label className="display-4 text-secondary">Login</Form.Label>
                        <Form.Group controlId="formBasicEmail">
                            <Form.Control type="email" value={this.state.email} onChange={this.handleEmailChange} placeholder="Email" required/>
                        </Form.Group>
                        
                        <Form.Group controlId="formBasicPassword">
                            <Form.Control type="password" value={this.state.password} onChange={this.handlePasswordChange} placeholder="Password" required/>
                        </Form.Group>
                        <Form.Group controlId="formBasicCheckbox">
                            <Form.Check type="checkbox" label="Remember me" />
                        </Form.Group>
                        <Button id="submitButton" variant="primary" type="submit">
                            Submit
                        </Button>
                    </Form>
                </div>
            </div>
        )
    }
}

export default Login;

Dashboard.js：

class Dashboard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            expenses: [],
            incomings: []
        }
    }

    render () {
        return (
            <>
            <p className="display-4">Dashboard</p>
            </>
        )
    }
}

export default Dashboard;

Answer 1

看来，在Login.js 中，您需要使用event.preventDefault() 防止默认提交行为

handleSubmit(event) {
        event.preventDefault()
        const data = `{"email": "${this.state.email}", "password": "${this.state.password}"}`
        this.sendLoginRequest(data);
    }