Question

我正在尝试显示从PHP获取的错误文本消息。从调试中可以看到，该消息在responseJson.message对象中正确返回，但是由于页面会重新加载自身，并且页面无法重新加载，因此我无法确定状态是否正在更新它，或者为什么它无法在HTML中正确呈现。 this.setState({ error: responseJson.message })指令之后立即清空输入字段。

import React, { Component } from "react";
import { PostData } from '../../modules/PostData';

class LoginForm extends Component {
    constructor() {
        super()
        this.state = {
            error: "",
            username: "",
            password: ""
        }
        this.onSubmit = this.onSubmit.bind(this)
        this.onChange = this.onChange.bind(this)
    }

    onSubmit() {
        this.setState({ error: "" })
        PostData('login', this.state).then((responseJson) => {
            if (responseJson.message === "login success") {
                sessionStorage.setItem('userData', JSON.stringify(responseJson));
                document.location.href = `/home`
            } else {
                console.log(this.state.error)
                this.setState({ error: responseJson.message })
            }
        })
    }

    onChange(e) {
        this.setState({ [e.target.name]: e.target.value })
    }
    render() {
        return (
            <form onSubmit={this.onSubmit}>
                <div>
                    <label htmlFor="username">Username:</label><br />
                    <input name="username" component="input" type="text" onChange={this.onChange}/>
                </div>
                <div>
                    <label htmlFor="password">Password:</label><br />
                    <input name="password" component="input" type="password" onChange={this.onChange}/>
                </div>
                <div>
                    <button type="submit">Login</button>
                </div>
                <div name="error" className='error' component="input" type="text" value={this.state.error}></div>
            </form>
        )
    }
}

export default LoginForm

感谢您的帮助！

Answer 1

div标签中没有component, value, type属性。在您的情况下，您应该使用：

<div name="error" className='error'>{this.state.error}</div>

或

<input name="error" className='error' component="input" type="text" value={this.state.error}></input>

反应-来自PHP的登录错误未显示

1 个答案: