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 状态未更新。

两个字段用户名和电子邮件。当输入用户名而不是第一次发送电子邮件时，错误状态正在更新。
当再次输入正确的电子邮件然后按提交时，它不是在更新错误状态，而是在更新值状态。我尝试使用 useEffect() 但没有用。

我是新来的，你能请我吗

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

Answer 1

发生这种情况是因为您正在改变 validation 中的 errors 对象，并在 submitChange 中调用 setErrors 时设置相同的 errors 对象。由于 errors 是相同的对象引用，因此不会触发重新渲染。您需要 return 来自 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;
  };

React Hooks，状态不更新

React Hooks, state not updating

reactjs

react-hooks

use-state