React调用setState后状态未更新问题排查（联系表单场景）

你不需要引入useEffect解决这个问题，所有异常都来自代码里的几个逻辑错误：

• React的setState是异步批处理机制：同一同步执行上下文内调用的setState，不会立刻修改当前函数作用域内的state变量，所有更新会在当前同步代码执行完成后统一触发组件重渲染。你在提交校验函数里刚调用完setName/setEmail就立刻打印state，拿到的永远是当前渲染周期的旧值，不可能拿到刚更新的结果。
• 表单没有遵循React受控组件规范：所有输入框没有绑定onChange事件同步状态，也没有绑定value关联state，用户输入时对应的state从头到尾都是初始空值，只有点击提交时你才通过document.getElementById抓DOM节点取值塞给state，既不符合React开发逻辑，也必然导致状态和输入不同步。
• 校验逻辑写反：当前代码判断email.length、subject.length为真（也就是用户填了内容）时就标记错误，空值反而判定为合法，和预期校验规则完全相反。
• 提交后打印提示状态的逻辑同样踩了setState异步的坑，刚调用完setState就打印，拿到的也是旧值，但这个问题不影响页面渲染，只是控制台输出不符合预期。

把表单改为标准受控组件，用户输入时实时同步状态，提交时直接读取已经同步完成的state做校验和接口请求，完全可以避开setState异步拿不到值的问题，不需要额外加useEffect。
修正后的完整代码如下：

import style from "../styles/Contact.module.css";
import React, { useState } from 'react'

export default function Contact() {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [subject, setSubject] = useState('')
    const [message, setMessage] = useState('')
    // 补全代码中已写输入框但未定义的手机号状态
    const [phone, setPhone] = useState('')

    const [errors, setErrors] = useState({})

    const [buttonText, setButtonText] = useState('Submit')

    const [showSuccessMessage, setShowSuccessMessage] = useState(false)
    const [showFailureMessage, setShowFailureMessage] = useState(false)

    const handleValidation = () => {
        let tempErrors = {}
        let isValid = true

        // 直接读取实时同步的state做校验，不需要操作DOM
        console.log(name, email, subject, message)
        if (name.length <= 0) {
            tempErrors['name'] = true
            isValid = false
        }
        // 修正校验逻辑：空值才报错，可自行扩展邮箱格式校验
        if (email.length <= 0) {
            tempErrors['email'] = true
            isValid = false
        }
        // 修正校验逻辑：空值才报错
        if (subject.length <= 0) {
            tempErrors['subject'] = true
            isValid = false
        }
        if (message.length <= 0) {
            tempErrors['message'] = true
            isValid = false
        }

        setErrors({ ...tempErrors })
        return isValid
    }

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

        let isValidForm = handleValidation()
        if (isValidForm) {
            setButtonText('Sending')

            const res = await fetch('/api/sendgrid', {
                body: JSON.stringify({
                    email: email,
                    name: name,
                    subject: subject,
                    message: message,
                    phone: phone
                }),
                headers: {
                    'Content-Type': 'application/json'
                },
                method: 'POST',
            })

            const { error } = await res.json()
            if (error) {
                console.log(error)
                setShowSuccessMessage(false)
                setShowFailureMessage('Error, please complete all sections')
                setButtonText('Submit')
                return
            }
            setShowSuccessMessage('Contact form submitted')
            setShowFailureMessage(false)
            setButtonText('Send')
            // 提交成功后清空表单
            setName('')
            setEmail('')
            setSubject('')
            setMessage('')
            setPhone('')
        }
    }
    return (
        <div className={style.container}>
            <h1 className={style.title}>Get in Touch</h1>
            <form className={style.form}>
                <input 
                    className={style.inputS} 
                    type="text" 
                    placeholder="Name" 
                    id='name' 
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />
                <input 
                    className={style.inputS} 
                    type="text" 
                    placeholder="Phone" 
                    id='phone' 
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                />
                <input 
                    className={style.inputL} 
                    type="text" 
                    placeholder="Email" 
                    id='email' 
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                <input 
                    className={style.inputL} 
                    type="text" 
                    placeholder="Subject" 
                    id='subject' 
                    value={subject}
                    onChange={(e) => setSubject(e.target.value)}
                />
                <textarea
                    className={style.textArea}
                    rows={6}
                    placeholder="Message"
                    id='message'
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                />
                <button 
                    type="submit"
                    className={style.button} 
                    onClick={handleSubmit}
                >
                    {buttonText}
                </button>
                <p className='error'>
                    {showSuccessMessage}
                    {showFailureMessage}
                </p>

            </form>
        </div>
    );
}

如果确实需要在状态更新后执行逻辑（比如打印更新后的值、状态变化后触发额外操作），再使用useEffect监听对应状态即可，这类表单同步提交的场景完全不需要。

内容的提问来源于stack exchange，提问作者TheNomadicAspie