React用使用state的异步函数钩住了穷举的deps无限循环

Question

我正在尝试处理一个异步函数，以便在数据库中插入数据。不幸的是，esintreact-hooks/exhaustive-deps要求我在useCallback中添加我的score状态。尽管当我添加这个时，我的应用程序会进入无限循环状态。

当我在回调需求行上添加eslint-disable-line时，我的代码运行得非常好。为什么会有这个规则，以及如何在不禁用esint规则的情况下以正确的方式解决它？

import React, { useState, useEffect, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { insertData } from 'ducks/data';
const App = () => {
const dispatch = useDispatch();
const sliderData = useSelector((state) => state.data.sliders);
const [score, setScore] = useState(0);
const handleData = useCallback(() => {
dispatch(insertData(score));
}, [dispatch]); // eslint-disable-line
useEffect(() => {
for (const [key, value] of Object.entries(sliderData)) {
const sliders = Object.values(value);
const totalSliderScore = sliders.reduce((a, b) => a + b, 0);
setScore((prevScore) => prevScore += totalSliderScore);
// Last slider in array
if (key === 'lastKey') {
handleData();
}
}
}, [sliderData, handleData]);
return ...
};
export default App;

Answer 1

您可以创建最新分数的引用，这样它就不会导致循环

const [score, setScore] = useState(0);
const latestScore = useRef();
const handleData = useCallback(() => {
dispatch(insertData(latestScore));
}, [dispatch,latestScore]); // eslint-disable-line
useEffect(() => {
...
latestScore.current = score
}
}, []);

Answer 2

useCallback中使用的任何状态变量都应该包括在依赖项列表中，否则您可能会得到该变量的陈旧数据。

const handleData = useCallback(() => {
dispatch(insertData(score));
}, [dispatch, score]);

为什么需要useEffect的依赖列表中的函数handleData？这不是造成循环的原因吗。我认为改为以下应该也能解决无限循环。

useEffect(() => {
for (const [key, value] of Object.entries(sliderData)) {
const sliders = Object.values(value);
const totalSliderScore = sliders.reduce((a, b) => a + b, 0);
setScore((prevScore) => prevScore += totalSliderScore);
// Last slider in array
if (key === 'lastKey') {
handleData();
}
}
}, [sliderData]);