解决React组件无限重渲染问题：深入理解useEffect依赖与状态管理

export default function KeyDrivers() {
    // ... 其他状态和Redux选择器
    const [featureSet, setFeatureSet] = useState(); // 局部状态

    const loadData = async (queryUrl = filters.url) => {
        setIsLoading(true);
        // ... 数据获取逻辑
        // 核心问题点：在数据加载函数内部更新了 featureSet 状态
        setFeatureSet({
            label: actionKeyDrivers.payload[0].featureSet.name,
            value: actionKeyDrivers.payload[0].featureSet.name,
            id: actionKeyDrivers.payload[0].featureSet.id
        });
        dispatch(actionKeyDrivers);
        // ... 其他逻辑
        setIsLoading(false);
    };

    // 原始的 useEffect Hook
    useEffect(() => {
        if (token === undefined) {
            navigate('/login');
        }
        dispatch({type: 'ROUTE', payload: '/home/key-drivers'});
        loadData();
    }, [featureSet]); // featureSet 是依赖项
    // ... 其他函数和渲染逻辑
}

import { useEffect, useState } from "react";
// ... 其他导入

export default function KeyDrivers() {
    // ... 其他状态和Redux选择器
    const token = useSelector((state) => state.user.profile.token);
    const username = useSelector((state) => state.user.profile.auth);
    const filters = useSelector((state) => state.filters.filters);
    const [featureSet, setFeatureSet] = useState(); // 局部状态

    const loadData = async (queryUrl = filters.url) => {
        setIsLoading(true);
        let featureSetId = undefined;
        if (featureSet) {
            featureSetId = featureSet.id;
        } else if (featureSets && featureSets.length > 0) { // 确保 featureSets 存在且非空
            featureSetId = featureSets[0].id;
        }

        if (featureSetId) { // 只有在有 featureSetId 时才尝试获取数据
            let actionKeyDrivers = await getFeatures({token, username, queryUrl, featureSetId});
            // 修正点1：在 loadData 内部更新 featureSet 状态，但它不再是 useEffect 的依赖
            setFeatureSet({
                label: actionKeyDrivers.payload[0].featureSet.name,
                value: actionKeyDrivers.payload[0].featureSet.name,
                id: actionKeyDrivers.payload[0].featureSet.id
            });
            dispatch(actionKeyDrivers);

            let actionCartData = await getFeaturesChartData({token, username, queryUrl, featureSetId});
            setShowCharts(true);
            setKeyDriverTableData(actionCartData.payload);
        } else {
            setShowCharts(false);
            setKeyDriverTableData([]); // 清空数据
            setFeatureSet(undefined); // 清空 featureSet
        }
        setIsLoading(false);
    };

    // 修正后的 useEffect Hook
    useEffect(() => {
        if (token === undefined) {
            navigate('/login');
        }
        dispatch({ type: 'ROUTE', payload: '/home/key-drivers' });
        // 修正点2：loadData 仅在 token, username, filters.url 变化时执行
        loadData();
    }, [token, username, filters.url, dispatch, navigate]); // 增加了 dispatch 和 navigate 作为依赖项，确保稳定性
    // ... 其他函数和渲染逻辑
}

const changeSelectFeatureSet = (val) => {
    setFeatureSet(val);
    // 在更新featureSet后，显式调用loadData以获取与新featureSet相关的数据
    // 如果 loadData 依赖于 featureSet 的最新值，则确保在调用 loadData 时 featureSet 已经更新
    // 或者将 val 直接传递给 loadData
    loadData(); // 或者 loadData(filters.url, val.id) 如果 loadData 接受 featureSetId
};