反应useCallback的useEffect依赖总是触发渲染

Question

我有一个谜。考虑以下自定义 React 钩子，它按时间段获取数据并将结果存储在 Map 中：

export function useDataByPeriod(dateRanges: PeriodFilter[]) {
    const isMounted = useMountedState();

    const [data, setData] = useState(
        new Map(
            dateRanges.map(dateRange => [
                dateRange,
                makeAsyncIsLoading({ isLoading: false }) as AsyncState<MyData[]>
            ])
        )
    );

    const updateData = useCallback(
        (period: PeriodFilter, asyncState: AsyncState<MyData[]>) => {
            const isSafeToSetData = isMounted === undefined || (isMounted !== undefined && isMounted());
            if (isSafeToSetData) {
                setData(new Map(data.set(period, asyncState)));
            }
        },
        [setData, data, isMounted]
    );

    useEffect(() => {
        if (dateRanges.length === 0) {
            return;
        }

        const loadData = () => {
            const client = makeClient();
            dateRanges.map(dateRange => {
                updateData(dateRange, makeAsyncIsLoading({ isLoading: true }));

                return client
                    .getData(dateRange.dateFrom, dateRange.dateTo)
                    .then(periodData => {
                        updateData(dateRange, makeAsyncData(periodData));
                    })
                    .catch(error => {
                        const errorString = `Problem fetching ${dateRange.displayPeriod} (${dateRange.dateFrom} - ${dateRange.dateTo})`;
                        console.error(errorString, error);
                        updateData(dateRange, makeAsyncError(errorString));
                    });
            });
        };

        loadData();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [dateRanges /*, updateData - for some reason when included this triggers infinite renders */]);

    return data;
}

当updateData 作为依赖项添加时，useEffect 被重复触发。如果我将它作为依赖项排除，那么一切都会按预期工作/行为，但eslint 抱怨我违反了react-hooks/exhaustive-deps。

鉴于updateData 一直是useCallback-ed，我不明白为什么它应该反复触发渲染。有没有人能解释一下？

Answer 1

问题在于useCallback/useEffect组合使用。必须小心 useCallback 和 useEffect 中的依赖数组，因为 useCallback 依赖数组中的更改将触发 useEffect 运行。

“data” 变量在 useCallback 依赖数组中使用，当调用 setData 时，react 将使用 data 变量的新值重新运行函数组件，并触发一系列调用。

调用堆栈看起来像这样：

1. useEffect 运行
2. 已调用更新数据
3. setState 调用
4. 组件使用新的状态数据重新渲染
5. data 的新值触发 useCallback
6. updateData 已更改
7. 再次触发useEffect

要解决此问题，您需要从 useCallback 依赖数组中删除 “data” 变量。我发现尽可能不在依赖数组中包含组件状态是一种很好的做法。

如果您需要从 useEffect 或 useCallback 更改组件状态，并且新状态是先前状态的函数，您可以传递接收当前状态作为参数并返回新状态的函数。

const updateData = useCallback(
    (period: PeriodFilter, asyncState: AsyncState<MyData[]>) => {
        const isSafeToSetData = isMounted === undefined || (isMounted !== undefined && isMounted());
        if (isSafeToSetData) {
            setData(existingData => new Map(existingData.set(period, asyncState)));
        }
    },
    [setData, isMounted]
);

在您的示例中，您只需要当前状态来计算下一个状态，这样应该可以工作。

Answer 2

这是我现在根据上面@jure 的评论得到的：

我认为问题在于“data”变量包含在useCallback的依赖数组中。每次设置数据时，都会更改触发 useCallback 以提供新的 updateData 并触发 useEffect 的数据变量。尝试在不依赖数据变量的情况下实现 updateData。您可以执行 setData(d=>new Map(d.set(period, asyncState)) 之类的操作，以避免将“数据”变量传递给 useCallback

我按照建议的方式调整了我的代码，并且成功了。谢谢！

export function useDataByPeriod(dateRanges: PeriodFilter[]) {
    const isMounted = useMountedState();

    const [data, setData] = useState(
        new Map(
            dateRanges.map(dateRange => [
                dateRange,
                makeAsyncIsLoading({ isLoading: false }) as AsyncState<MyData[]>
            ])
        )
    );

    const updateData = useCallback(
        (period: PeriodFilter, asyncState: AsyncState<MyData[]>) => {
            const isSafeToSetData = isMounted === undefined || (isMounted !== undefined && isMounted());
            if (isSafeToSetData) {
                setData(existingData => new Map(existingData.set(period, asyncState)));
            }
        },
        [setData, isMounted]
    );

    useEffect(() => {
        if (dateRanges.length === 0) {
            return;
        }

        const loadData = () => {
            const client = makeClient();
            dateRanges.map(dateRange => {
                updateData(dateRange, makeAsyncIsLoading({ isLoading: true }));

                return client
                    .getData(dateRange.dateFrom, dateRange.dateTo)
                    .then(traffic => {
                        updateData(dateRange, makeAsyncData(traffic));
                    })
                    .catch(error => {
                        const errorString = `Problem fetching ${dateRange.displayPeriod} (${dateRange.dateFrom} - ${dateRange.dateTo})`;
                        console.error(errorString, error);
                        updateData(dateRange, makeAsyncError(errorString));
                    });
            });
        };

        loadData();
    }, [dateRanges , updateData]);

    return data;
}