即使超时，useState 更新状态在同一处理程序中也不可用

Question

我有一个包含 3 个字段的简单注册表。我已将状态存储在 formValues 中，其中 value & error 与每个字段相关联。现在，当我提交表单而不填写任何或至少一个字段时，表单应该是无效的，但它会显示带有无效字段的验证消息，但会使表单有效。即使我添加了 setTimeout，更新后的状态在同一个 handleSubmit 中也不可用。如果我再次提交，该过程就可以正常工作。我知道状态更新是异步的，但如果我们在控制台中看到日志，则在 formValues 登录渲染后记录表单的验证消息，这些日志显示状态已正确更新，但最终验证消息显示无效状态.如果我将其更改为 class 组件，它就可以工作。这是 codesandbox 的 link。

import React, { useState } from "react";
import { Button, Form, Col } from "react-bootstrap";

const sleep = timeout => new Promise(resolve => setTimeout(resolve, timeout));

const RegistrationForm = () => {
  const [formValues, setFormValues] = useState({
    name: { value: "", error: null },
    email: { value: "", error: null },
    password: { value: "", error: null }
  });

  const handleInputChange = (e, field) => {
    const { value } = e.target;
    setFormValues(prevValues => ({
      ...prevValues,
      [field]: { value, error: null }
    }));
  };

  const validateForm = () => {
    let updatedFormValues = { ...formValues };

    Object.keys(formValues).forEach(field => {
      if (!formValues[field].value) {
        updatedFormValues = {
          ...updatedFormValues,
          [field]: { ...updatedFormValues[field], error: "required" }
        };
      }
    });

    setFormValues(updatedFormValues);
  };

  const isFormValid = () =>
    Object.keys(formValues).every(field => formValues[field].error === null);

  const handleSubmit = async e => {
    e.preventDefault();

    validateForm();

    await sleep(100);

    if (!isFormValid()) {
      console.log("form is not valid", formValues);
      return;
    }

    console.log("form is valid", formValues);

    // make api call to complete registration
  };

  console.log({ formValues });

  return (
    <Form className="registration-form" onSubmit={handleSubmit}>
      <Form.Row>
        <Col>
          <Form.Group controlId="name">
            <Form.Label>Name</Form.Label>
            <Form.Control
              type="text"
              placeholder="Enter name"
              value={formValues.name.value}
              onChange={e => handleInputChange(e, "name")}
            />
            <Form.Control.Feedback type="invalid" className="d-block">
              {formValues.name.error}
            </Form.Control.Feedback>
          </Form.Group>
        </Col>
        <Col>
          <Form.Group controlId="email">
            <Form.Label>Email</Form.Label>
            <Form.Control
              type="email"
              placeholder="Enter email"
              value={formValues.email.value}
              onChange={e => handleInputChange(e, "email")}
            />
            <Form.Control.Feedback type="invalid" className="d-block">
              {formValues.email.error}
            </Form.Control.Feedback>
          </Form.Group>
        </Col>
      </Form.Row>
      <Form.Row>
        <Col>
          <Form.Group controlId="password">
            <Form.Label>Password</Form.Label>
            <Form.Control
              type="password"
              placeholder="Enter password"
              value={formValues.password.value}
              onChange={e => handleInputChange(e, "password")}
            />
            <Form.Control.Feedback type="invalid" className="d-block">
              {formValues.password.error}
            </Form.Control.Feedback>
          </Form.Group>
        </Col>
        <Col />
      </Form.Row>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
};

export default RegistrationForm;

Answer 1

状态更新不仅是异步的，而且还会受到功能组件中闭包的影响，因此使用休眠或超时不会在同一个渲染周期中留下更新的值

您可以在 post:

中阅读更多相关信息

但是，您的情况的一个解决方案是维护一个 ref 和 toggle 是触发 useEffect 的值，您将在其中验证表单 post handleSubmit 处理程序验证它并设置 formValues

相关代码：

const validateFormField = useRef(false);

  const handleInputChange = (e, field) => {
    const { value } = e.target;
    setFormValues(prevValues => ({
      ...prevValues,
      [field]: { value, error: null }
    }));
  };

  const validateForm = () => {
    let updatedFormValues = { ...formValues };

    Object.keys(formValues).forEach(field => {
      if (!formValues[field].value) {
        updatedFormValues = {
          ...updatedFormValues,
          [field]: { ...updatedFormValues[field], error: "required" }
        };
      }
    });

    setFormValues(updatedFormValues);
    validateFormField.current = !validateFormField.current;
  };

  const isFormValid = () =>
    Object.keys(formValues).every(field => formValues[field].error === null);

  const handleSubmit = async e => {
    e.preventDefault();

    validateForm();

    // make api call to complete registratin
  };

  useEffect(() => {
    if (!isFormValid()) {
      console.log("form is not valid", formValues);
    } else {
      console.log("form is valid", formValues);
    }
  }, [validateFormField.current]); // This is fine since we know setFormValues will trigger a re-render

Working demo

即使超时，useState 更新状态在同一处理程序中也不可用

useState updated state not available in the same handler even with timeout

reactjs

react-hooks

use-state