React Hooks，状态不更新

Question

我是 react 和 js 新手。

import React from "react";
import { useState, useEffect } from "react";

const Forminput = () => {
  const [errors, setErrors] = useState({}); //state values
  const [values, setValues] = useState({
    username: "",
    email: "",
  }); //state values

  const change = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const submitChange = (e) => {
    e.preventDefault();

    console.log(values);
    setErrors(validation(values));
    console.log(errors);
  };

  const validation= (values) => {
    if (!values.username.trim()) {
      errors.username = "Username required";
    }

    if (!values.email) {
      errors.email = "Email required";
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      errors.email = "Email address is invalid";
    }

    return errors;
  };

  useEffect(() => {}, [errors]);

  return (
    <div>
      <h2>Create Your Form </h2>
      <form action="" className="form-inputs" onSubmit={submitChange}>
        <div className="username">
          <label htmlFor="username" className="username">
            Username
          </label>
          <input
            id="username"
            type="text"
            className="username"
            name="username"
            onChange={change}
            value={values.username}
          />
          {errors.username && <p>{errors.username}</p>}
        </div>

        <div className="email">
          <label htmlFor="email" className="email">
            email
          </label>
          <input
            id="email"
            type="text"
            name="email"
            className="email"
            onChange={change}
            value={values.email}
          />
          {errors.email && <p>{errors.email}</p>}
        </div>

        <input type="submit" className="signup" />
      </form>
    </div>
  );
};

setErrors 状态未更新。

1. 用户名和电子邮件两个字段。当输入用户名而不是电子邮件时，错误状态正在更新。
2. 当再次输入正确的电子邮件然后按提交时，它不会更新错误状态，而是更新值状态。我尝试使用 useeffect() 但不起作用。

我是新来的，你能不能请我。

当我更新值状态时，我也想更新错误状态。这是正确的方法还是帮助我

Answer 1

发生这种情况是因为当您在submitChange 中调用setErrors 时，您正在改变validation 中的errors 对象并设置相同的errors 对象。由于errors 是同一个对象引用，因此不会触发重新渲染。您需要从validation 返回一个新对象：

  const validation= (values) => {
    const result = {};

    if (!values.username.trim()) {
      result.username = "Username required";
    }

    if (!values.email) {
      result.email = "Email required";
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      result.email = "Email address is invalid";
    }

    return result;
  };