React受控输入useCallback闭包问题：状态更新异常原因解析

问题背景 #

在实现搜索栏时遇到两个问题：

• 输入框每次按键都会失去焦点：原因是输入组件Lookup定义在父组件Header内部，状态变化触发父组件重渲染，Lookup被重新定义，导致React卸载并重新挂载输入组件。
• 用useCallback缓存Lookup解决失焦后，虽然onChange能触发（控制台可打印按键内容），但theQuery始终是空字符串。将theQuery和setTheQuery作为props传入Lookup后问题解决，需要明确：
  1. 两种写法效果差异的原因
  2. useCallback对闭包作用域的处理逻辑

相关代码 #

export const Header = () => {
    const [theQuery, setTheQuery] = useState("");
    const [results, setResults] = useState<ResultType>();

    // 执行查询
    const runQuery = async () => {
        const r = await fetch(`/something`);
        if (r.ok) {
            setResults(await r.json());
        }
    }

    const debouncedQuery = debounce(runQuery, 500);

    useEffect(() => {
        if (theQuery.length > 3) {
            debouncedQuery()
        }
    }, [theQuery]);

    // 搜索结果组件
    const SearchResults = ({ results }: { results: ResultType }) => (
        <div id="results">{results.map(r => (
            <>
                <h4><a href={`/linkto/${r.id}`}>{r.title}</a></h4>
                {r.matches.map(text => (
                    <p>{text}</p>
                ))}
            </>
        ))}</div>
    )

    // 关键疑问点：为什么传props能正常工作，直接用作用域内的状态不行？
    const Lookup = useCallback((/* {theQuery, setTheQuery} : any */) => {
        return (
            <div id='lookup_area'>
                <input id="theQuery" value={theQuery}
                    placeholder={'Search...'}
                    onChange={(e) => {
                        setTheQuery(e.target.value);
                        console.log(theQuery);
                    }}
                    type="text" />
            </div>
        )
    }, [])

    return (
        <>
            <header className={`${results ? 'has_results' : ''}`}>
                <Lookup /* theQuery={theQuery} setTheQuery={setTheQuery} */ />
            </header>
            {results && <SearchResults results={results} />}
        </>
    )
}

核心原因解析 #

1. 空依赖useCallback导致状态为空的本质 #

useCallback的核心作用是缓存函数引用：当依赖数组为空时，它会始终返回第一次渲染时创建的函数实例。

第一次渲染Header时，theQuery的初始值是空字符串，此时创建的Lookup函数会通过闭包捕获这个初始值。后续输入触发setTheQuery导致父组件重渲染，但因为useCallback依赖为空，Lookup不会被重新创建，它内部引用的theQuery永远是第一次渲染时捕获的空字符串：

• 输入框的value绑定旧的theQuery，所以UI上看不到状态更新；
• onChange里的console.log(theQuery)打印的也是闭包捕获的旧值（再加上setState是异步更新，即使没有闭包问题，这里也会打印更新前的值）。

虽然setTheQuery是useState返回的稳定函数（不会随渲染变化），但theQuery是每次渲染都会更新的状态变量，旧的Lookup函数无法访问到最新值。

2. 传props解决问题的逻辑 #

当把theQuery和setTheQuery作为参数传入Lookup时，每次父组件重渲染调用Lookup(theQuery, setTheQuery)，函数内部使用的是当前渲染周期的最新参数值，而非闭包捕获的旧值。

即使Lookup的引用被useCallback缓存，每次调用它时传入的都是最新状态，因此输入框的value能绑定到最新的theQuery，状态更新也能正常反映到UI上。

补充：输入框失焦的根源 #

最初输入框失焦，是因为Lookup定义在Header内部，每次Header重渲染都会重新创建新的Lookup函数。React会将新函数视为全新组件，因此卸载旧输入组件并挂载新组件，导致输入框失去焦点。用useCallback缓存Lookup引用后，每次重渲染都是同一个函数，React会保留原组件实例，从而解决失焦问题。

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