react 18这个表单验证有问题吗？

Question

在表单验证中，我使用 Handel 更改，问题是它不会在输入值和状态更改中显示单个值，并且在提交的最后一次验证时它不会显示答案 React 18 版本有问题吗？ 图片：https://drive.google.com/file/d/1s1uvHR7LrDOh1Ud2_hBzuFXum-MWYBHh/view?usp=sharing

import React, { useEffect, useState } from "react";
export default function App() {
    const [data, setData] = useState({
        name: "",
        password: "",
    });

    function handlechange(e) {
        let { name, value } = e.target;
        return setData({ ...data, [name]: value }), console.log(data);
    }

    const onSubmithandeler = (e) => {
        let names = data.name;
        let passwords = !data.password.match(1);
        if (!names) {
            console.log("invalide name");
        } else if (!passwords) {
            console.log("password invalid");
        } else if (!names || !passwords) {
            console.log("all err");
        } else {
            setData(...data);
            console.log(...data);
        }
        e.preventDefault();
    };

    return (
        <div style={{ fontFamily: "roboto" }}>
            <nav
                className="font-lg w-full
 text-white flex font-bold justify-start bg-blue-700 sticky"
            >
                <h3 className="m-1 p-2">Ecomerce</h3>
                <h3 className="m-1 p-2">Login</h3>
                <h4 className="m-1 p-2">Register</h4>
            </nav>
            <div className="bg-gray-300">
                <div className="w-full h-screen flex items-center justify-center">
                    <form
                        onSubmit={onSubmithandeler}
                        className="w-full md:w-1/3 bg-white rounded-lg"
                    >
                        <div className="flex font-bold justify-center mt-6">
                            <img
                                className="h-20 w-20"
                                src="https://cdn.pixabay.com/photo/2018/11/13/21/43/avatar-3814049_960_720.png"
                            />
                        </div>
                        <h2 className="text-3xl text-center text-gray-700 mb-4">
                            Login Form
                        </h2>
                        <div className="px-12 pb-10">
                            <div className="w-full mb-2">
                                <div className="flex items-center">
                                    <input
                                        type="text"
                                        name="name"
                                        value=""
                                        onChange={handlechange}
                                        placeholder="Username"
                                        className="-mx-6 px-8  w-full border rounded px-3 py-2 text-gray-700 focus:outline-blue-400"
                                    />
                                </div>
                            </div>
                            <div className="w-full mb-2">
                                <div className="flex items-center">
                                    <input
                                        type="text"
                                        placeholder="Password"
                                        value=""
                                        name="password"
                                        onChange={handlechange}
                                        className="-mx-6 px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-blue-400"
                                    />
                                </div>
                            </div>
                            <div className="flex items-center ">
                                <input
                                    type="checkbox"
                                    className=" m-2 p-2 float-right focus:outline-blue-400"
                                />
                                <a
                                    href="#"
                                    className="text-xs m-2 p-2 text-gray-500 float-right "
                                >
                                    Forgot Password?
                                </a>
                            </div>
                            <button
                                type="submit"
                                value="Submit"
                                className="w-full py-2 rounded-full bg-green-600 text-gray-100  focus:outline-green-400"
                            >
                                Log In
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}

Answer 1

问题解决 if value-{data.[something]}