useEffect未正确追踪useState依赖：首次搜索表格不更新

你的核心问题是首次搜索表格无更新，第二次才正常，根源在于：

1. 依赖useEffect监听searchTerm触发搜索，但异步回调中引用的documentationIndexState是组件渲染时的闭包旧值，无法获取最新状态；
2. useEffect的依赖数组不完整，缺少documentationIndexState和props.config，导致React无法正确触发回调更新；
3. 初始空搜索的判断逻辑放在useEffect中，反而加剧了状态捕获的滞后问题。

方案一：将搜索逻辑直接绑定到按钮点击（推荐） #

把搜索逻辑从useEffect移到按钮的点击/表单提交事件中，直接在触发时获取最新状态，同时在事件内判断输入是否为空，彻底避免初始空搜索和闭包问题。

修改后的完整代码片段：

export const SearchWindow: React.FC<Props> = props => {
    const documentationIndexState = useSelector((store: StoreState) => store.documentationIndex);
    const dispatch = useDispatch();
    const [searchInput, setSearchInput] = React.useState('');

    // 封装搜索逻辑
    const handleSearch = async () => {
        // 过滤空输入，避免无效搜索
        if (!searchInput.trim()) return;
        
        try {
            const searchResults = await getSearchResults(props.config, searchInput, documentationIndexState, dispatch);
            // 使用当前最新的state映射结果行
            const rows = searchResults.map(result => ({
                cells: {
                    source: documentationIndexState.headerReference.find(x => x.id === result.id)!.source,
                },
            }));
            dispatch(setSearchResults(rows));
        } catch (err) {
            console.error('搜索失败:', err);
        }
    };

    return (
        <div>
            <form onSubmit={(e) => {
                e.preventDefault();
                handleSearch();
            }}>
                <input
                    placeholder='输入搜索词'
                    onChange={e => setSearchInput(e.target.value)}
                    value={searchInput}
                />
                <button type="submit">搜索</button>
            </form>
            <DataTable rows={documentationIndexState.searchResults} />
            {/* 其他内容 */}
        </div>
    );
};

方案二：修复useEffect的依赖与闭包问题 #

如果坚持使用useEffect监听searchTerm，需要补全依赖数组，并通过useRef保存最新状态，避免异步回调中捕获旧值：

export const SearchWindow: React.FC<Props> = props => {
    const documentationIndexState = useSelector((store: StoreState) => store.documentationIndex);
    const dispatch = useDispatch();
    const [searchInput, setSearchInput] = React.useState('');
    const [searchTerm, setSearchTerm] = React.useState('');
    // 用ref保存最新的状态，避免闭包捕获旧值
    const stateRef = React.useRef(documentationIndexState);

    // 同步ref与最新状态
    React.useEffect(() => {
        stateRef.current = documentationIndexState;
    }, [documentationIndexState]);

    React.useEffect(() => {
        if (!searchTerm.trim()) return;

        const fetchResults = async () => {
            // 使用ref中的最新状态
            const searchResults = await getSearchResults(props.config, searchTerm, stateRef.current, dispatch);
            const rows = searchResults.map(result => ({
                cells: {
                    source: stateRef.current.headerReference.find(x => x.id === result.id)!.source,
                },
            }));
            dispatch(setSearchResults(rows));
        };

        fetchResults();
    }, [searchTerm, props.config, dispatch]); // 补全所有依赖项

    return (
        <div>
            <form>
                <input
                    placeholder='输入搜索词'
                    onChange={e => setSearchInput(e.target.value)}
                    value={searchInput}
                />
                <button
                    onClick={e => {
                        e.preventDefault();
                        setSearchTerm(searchInput);
                    }}
                >
                    搜索
                </button>
            </form>
            <DataTable rows={documentationIndexState.searchResults} />
            {/* 其他内容 */}
        </div>
    );
};

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