ExtReact函数中query未更新为新值始终获取初始值是什么原因

问题原因 #

• 核心是React函数组件的闭包陷阱导致的：你的handleChaneValue函数在组件首次渲染时创建，捕获了首次渲染时的初始query值{field: '', email: ''}。后续组件状态更新重新渲染时，handleChaneValue如果没有重新生成，会一直持有首次渲染的陈旧query值，所以每次用...query扩展的时候，都是基于初始值覆盖，自然无法保留之前更新的字段值。你在组件外层打印的query2可以拿到最新值，是因为外层代码在每次组件重新渲染时都会执行，处于最新的渲染上下文，所以可以读取到最新的状态。
• 你当前采用的setQuery(新对象)写法，在新状态依赖旧状态的场景下本身就容易出现取值陈旧的问题，React状态更新是批量异步执行的，直接传对象无法保证拿到的是最新的状态值。
• 额外问题：你初始化query的时候没有添加url字段，后续修改url时也会出现初始值缺失的问题。

解决方法 #

方案1（优先推荐）：使用状态的函数式更新 #

useState返回的更新函数支持传入一个回调，回调的第一个参数就是当前最新的状态值，完全不受闭包影响，修改handleChaneValue里的setQuery逻辑即可：

const handleChaneValue = (value) => {
    console.log('query', query);
    // 用函数式更新，prevQuery永远是最新的前序状态
    setQuery(prevQuery => ({
        ...prevQuery,
        [value.sender.name]: value.newValue
    }))
}

方案2：用useCallback包裹处理函数并添加依赖 #

如果不想用函数式更新，可以用useCallback包裹handleChaneValue，并把query加入依赖项，保证每次query更新后处理函数都会重新生成、拿到最新的query值：

import { useCallback } from 'react';

// ...组件内逻辑
const handleChaneValue = useCallback((value) => {
    console.log('query', query);
    setQuery({
        ...query,
        [value.sender.name]: value.newValue
    })
}, [query]) // 依赖query，每次query变化就重新生成函数

注意：该方案会每次状态变更都重新生成处理函数，性能略低于方案1，非特殊情况优先选方案1。

补充优化：补全初始state字段 #

修改初始化的query，补全url字段，避免后续出现undefined的异常：

const [query, setQuery] = useState({
    field: '',
    email: '',
    url: '' // 补全url初始值
});

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