React中子组件Array类型Props未更新的问题求助

核心是闭包陷阱：queryItems函数在创建时捕获了当时的excludeIds值，当excludeIds更新后，虽然SelectContainer重新渲染生成了新的queryItems，但如果Select组件的searchResults函数未同步更新（或SearchSelect缓存了旧的search函数），就会一直调用旧的queryItems，导致使用的还是旧的excludeIds。

方法1：重构queryItems，摆脱闭包依赖 #

把excludeIds作为参数直接传入queryItems，确保每次调用都使用最新的excludeIds：

const SelectContainer = ({ excludeIds }) => {
    const queryItems = (items, currentExcludeIds) => {
        return items.filter((item) => !currentExcludeIds.includes(item.id))
    }
    console.log("SELECT CONTAINER EXCLUDEIDS:", excludeIds);
    return (
        <Select queryItems={queryItems} excludeIds={excludeIds} />
    );
};

const Select = ({ queryItems, excludeIds, addItem }) => {
    const [items, setItems] = useState(dummyItems);
    const searchResults = (value) => {
        console.log("SELECT EXCLUDEIDS:", excludeIds);
        return queryItems(items, excludeIds);
    }
    return <SearchSelect search={searchResults} onItemSelect={(item) => addItem(item)} />;
};

方法2：用useCallback确保函数引用随依赖更新 #

如果不想修改参数结构，用useCallback包裹queryItems和searchResults，让它们仅在依赖项变化时重新创建，确保组件能感知到props更新：

import { useCallback } from 'react';

const SelectContainer = ({ excludeIds }) => {
    const queryItems = useCallback((items) => {
        return items.filter((item) => !excludeIds.includes(item.id))
    }, [excludeIds]); // 依赖excludeIds，更新时生成新函数
    console.log("SELECT CONTAINER EXCLUDEIDS:", excludeIds);
    return (
        <Select queryItems={queryItems} excludeIds={excludeIds} />
    );
};

const Select = ({ queryItems, excludeIds, addItem }) => {
    const [items, setItems] = useState(dummyItems);
    const searchResults = useCallback((value) => {
        console.log("SELECT EXCLUDEIDS:", excludeIds);
        return queryItems(items);
    }, [queryItems, excludeIds, items]); // 加入所有依赖项
    return <SearchSelect search={searchResults} onItemSelect={(item) => addItem(item)} />;
};

提示：如果SearchSelect用了React.memo优化，必须保证search的引用在依赖变化时更新，否则组件不会重新渲染。

方法3：简化结构，直接在Select内实现过滤 #

如果过滤逻辑不复杂，直接把过滤逻辑移到Select组件内，减少props传递和闭包问题：

const SelectContainer = ({ excludeIds }) => {
    console.log("SELECT CONTAINER EXCLUDEIDS:", excludeIds);
    return (
        <Select excludeIds={excludeIds} />
    );
};

const Select = ({ excludeIds, addItem }) => {
    const [items, setItems] = useState(dummyItems);
    const searchResults = (value) => {
        console.log("SELECT EXCLUDEIDS:", excludeIds);
        return items.filter(item => !excludeIds.includes(item.id));
    }
    return <SearchSelect search={searchResults} onItemSelect={(item) => addItem(item)} />;
};

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