React.js函数组件return中无法访问useState的error变量报错如何解决

• 你当前使用的是React函数组件，函数组件不存在this指向，代码中两处this调用（赋值时的this.state.error、渲染时的{this.error}）是触发TypeError: Cannot read property 'error' of undefined的直接原因。
• 你混淆了类组件和函数组件的状态操作逻辑：error字段是存在你用useState声明的form状态对象中的，不能用类组件的this.state语法操作。
• 额外小问题：React内联style需要传入对象，你写的style={"color: red"}语法错误；原return中标签存在未闭合问题。

1. 替换handleSubmit中的错误赋值逻辑，使用setForm更新状态：将this.state.error = "Invalid Email or Password";替换为setForm(prev => ({...prev, error: "Invalid Email or Password"}))
2. 替换渲染处的错误取值逻辑：将{this.error}替换为{form.error}
3. 修正内联style写法：将style={"color: red"}改为style={{color: "red"}}
4. 补全return中未闭合的标签

import { useHistory, useState } from 'react-router-dom'

const Login = () => {
    let history = useHistory();

    const [form,setForm] = useState({
        email:'',
        password:'',
        error:''
    })

    const handleSubmit = async(e)=>{
        e.preventDefault();
        let a = await login(form);
        console.log(a);
        if(typeof a !== "undefined") {
            history.push('/Trial')
        }
        else {
             setForm(prev => ({...prev, error: "Invalid Email or Password"}))
        }
        console.log('Logged in')
        console.log(e);
    }

    return (
        <div>
            <head>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
                <title>Sign In</title>
                <link rel="stylesheet" href="login.css"></link>
            </head>
                <body>
                    <div className="container1 bg">
                        <div className="forms-container">
                            <div className="signin">
                                <form className="sign-in-form" onSubmit={handleSubmit}>
                                    <h2 className="title">Sign In</h2>
                                    <div className="input-field">
                                        <i className="fas fa-envelope"></i>
                                        <input type="email" placeholder="Email Address" onChange={(e) => setForm({...form, email: e.target.value})}/>
                                    </div>
                                    <div className="input-field">
                                        <i className="fas fa-lock"></i>
                                        <input type="password" placeholder="Password" onChange={(e) =>setForm({...form, password: e.target.value})}/>
                                    </div>
                                    <button class="btn1 solid">Login</button>
                                    <p class="social-text" style={{color: "red"}}>{form.error}</p>
                                </form>
                            </div>
                        </div>
                    </div>
                </body>
        </div>
    )
}

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