0

我有以下react组件：

type Props = {
    country: string;
    electricityValues: number[];
    activeStep: number;
    setActiveStep: React.Dispatch<React.SetStateAction<number>>;
}

const EmissionsMemoized = (props: Props) => {
    const {country, electricityValues, activeStep, setActiveStep} = props;

    useEffect(() => {
        //make api call
    }, [electricityValues]);

    return (
        <>
            //...
        </>
    );
}

为了避免不必要的重新渲染，我将memo其定义如下：

export default function Emissions() {
    const {country, electricityValues, activeStep, setActiveStep} = useContext(AppContext);
    return useMemo(() => (<EmissionsMemoized country={country} electricityValues={electricityValues} activeStep={activeStep} setActiveStep={setActiveStep} />), []);
}

该组件在Stepper-Component 中提供服务：

function getStepContent(step: number) {
    switch (step) {
//...
        case 2:
            return <Emissions />;
//...
    }
}

不幸的是，无论状态是否实际改变，useEffect()每次Emissions-component 返回时都会触发 API 调用。getStepContent()

知道如何useEffect()仅在electricityValues-array 的值更改时触发吗？

是因为useContext()每次都返回一个新的引用吗？

4

0 回答 0