React表单数据更新逻辑及相关技术疑问咨询

示例代码 #

import React from "react"

export default function Form() {
    const [formData, setFormData] = React.useState(
        {firstName: ""}
    )
    
    console.log(formData.comments)
    
    function handleChange(event) {
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [event.target.name]: event.target.value
            }
        })
    }
    
    return (
        <form>
            <input
                type="text"
                placeholder="First Name"
                onChange={handleChange}
                name="firstName"
                value={formData.firstName}
            />
        </form>
    )
}

表单更新流程理解 #

• 用户在输入框中输入文本
• onChange触发handleChange回调函数
• handleChange调用状态更新函数修改state
• 状态更新导致组件重新渲染

疑问解答 #

1. 为何每次输入变化时console.log(formData.comments)都会执行？是否是组件重渲染导致？若如此，为何const [formData, setFormData] = React.useState({firstName: ""});不会每次重置？

没错，每次输入触发状态更新后，组件会重新渲染，组件函数会从头执行一遍，所以console.log会每次都触发。但useState的行为是React内部做了特殊处理：只有组件第一次渲染时，才会使用你传入的初始值{firstName: ""}初始化状态；后续每次重渲染，useState都会返回当前最新的状态值，不会重新用初始值覆盖。React会在组件实例中单独存储这个状态，和组件函数的执行周期无关，所以不会被重置。

2. handleChange中通过[event.target.name]: event.target.value更新状态，而input的value绑定了formData.firstName，状态未更新时value为何能同步输入内容，最终实现状态更新？

这里存在一个误解：状态没更新的时候，input的value其实还是旧的state值。用户输入时，浏览器会先在DOM层面临时显示输入的内容，同时触发onChange事件。event.target.value拿到的就是DOM输入后的最新值，接着我们用这个值去更新state，组件重渲染后，input的value才会被更新为新的state值，完成状态和UI的同步。整个流程是：DOM临时变化 → 捕获最新值 → 更新state → 重渲染同步UI，这就是React受控组件的核心逻辑。

3. 在哪里可以查看handleChange函数接收的event对象的详细信息？

有两种简单可行的方式：

• 在handleChange函数里添加console.log(event)，打开浏览器开发者工具的Console面板，点击输出的event对象展开，就能查看所有属性和方法；
• 在handleChange里添加debugger语句，运行代码时浏览器会自动暂停在断点处，切换到开发者工具的Sources面板，右侧Scope栏里就能查看event的详细信息，还能分步调试。

注意：React的事件是合成事件（SyntheticEvent），默认在事件回调执行完后会被回收复用，如果要在异步操作（比如setTimeout）里查看event，需要先调用event.persist()保留这个对象。

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