侧边栏切换时API异常调用问题排查求助

问题现象 #

点击AngleRightIcon关闭侧边栏时功能正常，但点击FaAngleLeft显示侧边栏时，SegmentList组件内useEffect封装的API请求会被自动执行。期望侧边栏切换仅触发页面重渲染，尝试修改useEffect的依赖数组（设为空数组、[filePath, frameValue, processNumber]等）均无法解决该问题。

相关代码 #

App.jsx #

const App = () => {
    ...
    const [showRightBar, setShowRightBar] = useState(true);
    ...
    const toggleSegmentsList = useCallback(() => setShowRightBar((v) => !v), []);

    // 即使依赖数组设为[showRightBar]，点击FaAngleLeft时仍会触发API调用
    return (
        <>
            {showRightBar && (
                <SegmentList
                    toggleSegmentsList={toggleSegmentsList}
                />
            )}
            ....
            {!showRightBar && (
                <FaAngleLeft
                    title={t("Show sidebar")}
                    onClick={toggleSegmentsList}
                />
            )}
        </>
    )
}

SegmentList.jsx #

useEffect(() => {
    const sendPostRequest = async () => {
        const postData = {
            filepath: filePath,
            clips: ["0-59.993"],
            frame: Number(frameValue),
            process: Number(processNumber)
        };

        const res = await postWithToastAndErrorHandling(postData); 
        if (!res) return;

        const { results } = res.data;
        return res.data.results;
    };
        
    const postWithToastAndErrorHandling = async (postData) => {
        try {
            return await axios.post(import.meta.env.apiAddress, postData);
        } catch (error) {
            toast.fire({
                icon: "error",
                title: "Error",
            });
        }
    };

    const handlePostSegments = async () => {
        const res = await sendPostRequest();
    };

    handlePostSegments();
}, [segments]);

// 即使依赖数组设为空数组，点击FaAngleLeft时仍会触发API调用
// 尝试过设置依赖为[filePath, frameValue, processNumber]，问题依旧

return (
    <AngleRightIcon
        title={t("Close sidebar")}
        role="button"
        onClick={toggleSegmentsList}
    />
)

segments格式示例：

[{end: 59.993,name: "", segColorIndex: 0,segId: "xxxx",start: 0,tags: undefined}]

问题根因 #

1. 组件挂载触发useEffect：当点击FaAngleLeft时，showRightBar变为true，SegmentList组件会被重新挂载（之前因条件渲染被卸载）。React中组件挂载时，useEffect会自动执行一次，无论依赖数组是什么（空数组也会在挂载时执行）。而关闭侧边栏时，组件是被卸载，不会触发内部useEffect，因此看起来关闭时正常。
2. segments引用变化：如果segments在组件挂载时是一个新的数组引用（比如每次父组件渲染都生成新数组），即使内容完全相同，也会触发依赖数组变化，导致useEffect执行。

解决方案 #

方案1：避免组件卸载/挂载（推荐） #

不要用条件渲染控制组件的存在，而是通过CSS样式控制显示隐藏，保持组件始终挂载，这样切换时不会触发useEffect的挂载执行：

// App.jsx 修改后
const App = () => {
    ...
    const [showRightBar, setShowRightBar] = useState(true);
    ...
    const toggleSegmentsList = useCallback(() => setShowRightBar((v) => !v), []);

    return (
        <>
            <SegmentList
                toggleSegmentsList={toggleSegmentsList}
                style={{ display: showRightBar ? "block" : "none" }}
            />
            {/* 统一控制图标显示 */}
            {showRightBar ? (
                <AngleRightIcon
                    title={t("Close sidebar")}
                    role="button"
                    onClick={toggleSegmentsList}
                />
            ) : (
                <FaAngleLeft
                    title={t("Show sidebar")}
                    onClick={toggleSegmentsList}
                />
            )}
        </>
    )
}

方案2：添加请求触发条件（保留条件渲染时使用） #

在SegmentList中增加状态控制，仅在真正需要更新数据时触发API请求，而非组件挂载就执行：

// SegmentList.jsx 修改后
import { useState, useEffect } from 'react';

const SegmentList = ({ toggleSegmentsList, filePath, frameValue, processNumber }) => {
    const [shouldFetch, setShouldFetch] = useState(false);

    // 仅当业务依赖变化时，标记需要请求数据
    useEffect(() => {
        setShouldFetch(true);
    }, [filePath, frameValue, processNumber]);

    useEffect(() => {
        if (!shouldFetch) return;

        const sendPostRequest = async () => {
            const postData = {
                filepath: filePath,
                clips: ["0-59.993"],
                frame: Number(frameValue),
                process: Number(processNumber)
            };

            const res = await postWithToastAndErrorHandling(postData); 
            if (!res) return;
            return res.data.results;
        };
            
        const postWithToastAndErrorHandling = async (postData) => {
            try {
                return await axios.post(import.meta.env.apiAddress, postData);
            } catch (error) {
                toast.fire({
                    icon: "error",
                    title: "Error",
                });
            }
        };

        const handlePostSegments = async () => {
            await sendPostRequest();
            setShouldFetch(false); // 请求完成后重置，避免重复触发
        };

        handlePostSegments();
    }, [shouldFetch, filePath, frameValue, processNumber]);

    return (
        <AngleRightIcon
            title={t("Close sidebar")}
            role="button"
            onClick={toggleSegmentsList}
        />
    )
}

方案3：缓存segments引用 #

如果segments是父组件传入的，用useMemo缓存其引用，避免无意义的变化触发useEffect：

// 父组件中处理segments
const memoizedSegments = useMemo(() => segments, [/* segments的实际依赖项，比如内部字段的数据源 */]);

// 传给SegmentList
<SegmentList
    segments={memoizedSegments}
    toggleSegmentsList={toggleSegmentsList}
/>

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