数组在带有钩子的函数组件中未在React State中更新

Question

我正在研究表单验证，并且在State中有一个validationMessages数组来存储验证消息。当用户提交表单时，我将运行验证并尝试更新State中的validateMessages数组。但是仅添加最后一个validationMessage，而没有添加。代码如下：

import React, { useState } from 'react';

function Form(props) {
    const [validationMessages, setValidationMessages] = useState([]);
    const [formData, setFormData] = useState({});
    const handleChange = ({ target }) => {
        setFormData({ ...formData, [target.name]: target.value });
    }
    const handleClick = (evt) => {
        validateForm();
        if (validationMessages.length > 0) {
            evt.preventDefault();
        }
    }
    const validateForm = () => {
        const { firstName, lastName, DOB, gender } = formData;
        setValidationMessages([]);
        if (!firstName) {
            setValidationMessages([...validationMessages, "First Name is required"]);
        }
        if (!lastName) {
            setValidationMessages([...validationMessages, "Last Name is required"]);
        }
        if (!gender) {
            setValidationMessages([...validationMessages, "Please select a Gender"]);
        }
        if (!DOB) {
            setValidationMessages([...validationMessages, "Date of Birth is required"]);
        }
    }
    return <div style={{ display: 'flex', flexDirection: 'row' }} >
        <form style={{ display: 'flex', flexDirection: 'column' }}>
            <label>First Name</label>
            <input value={formData.firstName || ''} onChange={handleChange} type="text" name="firstName" />
            <label>Last Name</label>
            <input value={formData.lastName || ''} onChange={handleChange} type="text" name="lastName" />
            <label>Date of Birth</label>
            <input value={formData.DOB || ''} onChange={handleChange} type="datetime-local" name="DOB" />
            <label>Gender</label>
            <div><input value="Male" checked={formData.gender === "Male"} onChange={handleChange} type="radio" name="gender" />Male</div>
            <div><input value="Female" checked={formData.gender === "Female"} onChange={handleChange} type="radio" name="gender" />Female</div>
            <div><input value="None" checked={formData.gender === "None"} onChange={handleChange} type="radio" name="gender" />Prefer not to say</div>
            <button type="button" onClick={handleClick}>Save</button>
        </form><div>{validationMessages.length > 0 && <span>Validation Summary</span>}
            <ul>
                {validationMessages.map(vm => <li key={vm}>{vm}</li>)}
            </ul></div></div>;
}

export default Form;  

问题是，如果我将所有字段都留空，那么仍然只有最后一条验证消息被添加到validationMessages的状态数组中。即使花了很多时间在StackOverflow.com上查找类似的问题及其答案，也无法弄清楚。任何指针或帮助表示赞赏。

Answer 1

在validateForm中，您多次调用setValidationMessages将一条消息添加到状态数组。但是setValidationMessages是异步的，因此第二个调用将没有validationMessages的新版本，因此只有最后一条消息将保存到状态中

这里是可能的解决方案：

const validateForm = () => {
    const { firstName, lastName, DOB, gender } = formData;
    const messages = [];
    if (!firstName) {
        messages.push("First Name is required");
    }
    if (!lastName) {
        messages.push"Last Name is required");
    }
    if (!gender) {
        messages.push("Please select a Gender");
    }
    if (!DOB) {
        messages.push("Date of Birth is required");
    }
    setValidationMessages(messages);
}