React外部点击检测组件意外清空state问题求助

问题现象 #

原本正常运行的OutsideAlerter外部点击检测组件，在复用的TableFilterDropdownController中使用时，点击组件外部会意外将tableFilterState的全部字段重置为初始空值，而非仅将state字段修改为INACTIVE。点击外部后状态变为：

{
    "state": "INACTIVE",
    "iconColor": "black",
    "filter": "",
    "filteredRows": [],
    "localActiveFilters": []
}

问题原因 #

1. 闭包陷阱捕获旧状态 #

OutsideAlerter组件中的useOutsideAlerter Hook的useEffect依赖项为空数组[]，导致该Effect仅在组件初始渲染时执行一次，绑定的handleClickOutside函数会捕获初始渲染时的onClickOutside函数。而初始的onClickOutside引用的是组件刚挂载时的tableFilterState，后续状态更新后，点击外部触发的仍然是这个旧函数，用初始状态展开后修改state，直接覆盖了所有已更新的字段。

2. 状态更新依赖当前渲染周期的旧值 #

TableFilterDropdownController中多处使用setTableFilterState({...tableFilterState, ...newFields})的形式更新状态，这种写法依赖当前渲染周期的tableFilterState值，当存在异步更新或闭包捕获旧值时，会导致状态更新异常。

解决方案 #

1. 修复OutsideAlerter的依赖问题 #

修改useOutsideAlerter Hook的useEffect依赖项，将onClickOutside加入依赖数组，确保每次onClickOutside更新时重新绑定事件监听器：

function useOutsideAlerter(ref, onClickOutside) {
    useEffect(() => {
        function handleClickOutside(event) {
            if (ref.current && !ref.current.contains(event.target)) {
                onClickOutside();
            }
        }

        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [ref, onClickOutside]); // 添加onClickOutside到依赖数组
}

2. 使用函数式更新避免闭包问题 #

所有更新tableFilterState的操作，改用React函数式更新形式，确保每次更新都基于最新状态：

修改onClickOutside函数

const onClickOutside = () => {
    setTableFilterState(prevState => ({...prevState, state: INACTIVE}));
};

修改onClick函数

const onClick = () => {
    setTableFilterState(prevState => {
        if (prevState.state === DROP_DOWN) {
            return prevState.localActiveFilters.length > 0
                ? {...prevState, state: ACTIVE}
                : {...prevState, state: INACTIVE};
        } else {
            return {...prevState, state: DROP_DOWN};
        }
    });
};

修改addLocalActiveFilter函数

const addLocalActiveFilter = (filter) => {
    setTableFilterState(prevState => {
        let newActiveFilters = [...prevState.localActiveFilters];
        const index = newActiveFilters.indexOf(filter);
        if (index > -1) {
            newActiveFilters.splice(index, 1);
        } else {
            newActiveFilters.push(filter);
        }
        return {...prevState, localActiveFilters: newActiveFilters};
    });
};

修改setFilter回调

// 在TableFilterDropdownController的return中修改setFilter属性
setFilter={e => setTableFilterState(prevState => ({...prevState, filter: e.target.value}))}

修改两个useEffect中的状态更新

// 第一个useEffect
useEffect(() => {
    setTableFilterState(prevState => {
        if (prevState.state === INACTIVE && prevState.localActiveFilters.length > 0) {
            return {...prevState, state: ACTIVE};
        }
        return prevState;
    });
}, [tableFilterState.state])

// 第二个useEffect
useEffect(() => {
    setTableFilterState(prevState => {
        let tempFilteredRows = [];
        if (prevState.filter !== "") {
            rows.forEach(row => {
                const value = row[colKey];
                if (value.toLowerCase().includes(prevState.filter.toLowerCase()) && !tempFilteredRows.includes(value)) {
                    tempFilteredRows.push(value);
                }
            });
        } else {
            rows.forEach(row => {
                const value = row[colKey];
                if (!tempFilteredRows.includes(value)) {
                    tempFilteredRows.push(value);
                }
            });
        }
        return {...prevState, filteredRows: tempFilteredRows};
    });
}, [tableFilterState.filter, rows])

3. 额外优化建议 #

可以将tableFilterState拆分为多个独立的useState，或使用useReducer管理复杂状态，进一步减少闭包问题的发生，同时提升组件性能。

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