React中基于状态的无限循环

Question

我想在我的React组件内与Redux状态切换无限循环。这是我到目前为止得到的，但它不能正常工作，因为当状态改变时它不会停止，因为函数使用它的旧版本。

const { monitors } = useSelector((state) => state.monitors)
useEffect(() => {
handleMonitoring(monitors)
}, [monitors])
const handleMonitoring = async () => {
if (monitors && monitors.filter(monitor => { return monitor.active }).length) {
await dispatch(watchMonitors(monitors));
return handleMonitoring()
}
else {
console.log('closed')
return;
}
}

Answer 1

您必须声明一个额外的变量来确定是否要继续监视。

该变量将初始化为true，并在清理函数中设置为false。

const { monitors } = useSelector(state => state.monitors)
useEffect(() => {
let active = true;

async function handleMonitoring() {
while(active && monitors && monitors.find(m => m.active)) {
await dispatch(watchMonitors(monitors));
}
console.log('closed');
}
handleMonitoring();
return () => { active = false; };
}, [monitors]);

Answer 2

我认为使用递归函数代替无限循环是更好的主意。

const handleMonitoring = async () => {
await dispatch(watchMonitors(monitors));
if(monitors && monitors.filter(monitor => { return monitor.active }).length) {
return;
}
else {
return handleMonitoring()
}
}