JSX 中的电子邮件字段导致触摸时出错

Question

这个错误并不影响功能，但它就在那里，它确实困扰着我。

所以，我的react.js 应用程序中有这个注册表单。这是它的基本版本：

import { useState } from "react"
import {signupApi} from '../utils/api'


const SignUpPage = () => {
    const [credentials, setCredentials] = useState({ username: '', password: '', email:'', });
    const [error, setError] = useState(null);

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            signupApi(credentials);
        } catch (error) {
            setError(error.message);
        }
    };

    const handleChange = (e) => {
        console.log("heyhey")
        setCredentials({
            ...credentials,
            [e.target.name]: e.target.value,
        });
    };

    return(
        <div>
            <h1>Signup</h1>
            {error && <p>{error}</p>}
            <form onSubmit={handleSubmit}>
                <div>
                    <label htmlFor="username">Username:</label>
                    <input autoComplete="off" type="text" id="username" name="username" value={credentials.username} onChange={handleChange} required />
                </div>
                <div>
                    <label htmlFor="password">Password:</label>
                    <input autoComplete="off"  type="password" id="password" name="password" value={credentials.password} onChange={handleChange}  required />
                </div>
                <div>
                    <label htmlFor="email">Email:</label>
                    <input autoComplete="off" type="email" id="email" placeholder="[email protected]" name="email" value={credentials.email} onChange={handleChange} required/>
                </div>
                <button type="submit">Signup</button>
            </form>
        </div>
    )
}

export default SignUpPage

当我单击“电子邮件”字段时，它会产生以下错误：

这就是我打开 chunk.infield.js 时看到的内容

• 我没有安装与表单或图标直接相关的库。

    "dependencies": {
    "@reduxjs/toolkit": "^1.9.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^9.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.8.0",
    "react-scripts": "5.0.1",
    "universal-cookie": "^4.0.4",
    "web-vitals": "^2.1.4"
  },
  

• 如果我为电子邮件变量设置默认值，例如“[email protected]”，它将停止抛出错误。

• 如果我为电子邮件变量设置默认值，例如“@”，或者当我将其留空时，它会不断抛出相同的错误。

• 无论有没有错误，注册功能都工作得很好，它通过api发送数据，将数据保存到数据库中。

• 当用户填写电子邮件字段（例如“[email protected]”），然后重新单击电子邮件字段时，不会发生错误。

我已经使用了占位符，我不需要电子邮件变量的任何默认值，它应该为空。

在我看来，后台某处正在进行验证，但它的工作方式不是最佳的，并没有真正的帮助。

这可能是什么原因造成的，我该如何解决？

Answer 1

您的代码没有任何问题。这是由 LastPass chrome 插件引起的。禁用它（仅用于测试），错误就会消失。