React Hooks useCallback依赖无限循环

Question

我目前在组件挂载时获取数据，然后在用户单击按钮时获取数据。但是，如果请求正在进行中，我想阻止按钮抓取，这就是我更新isFetching状态的原因。

但是，我需要将isFetching添加到useCallback依赖项以删除警告，如果我这样做，则会触发无限取循环。

下面是我的代码:

import { useCallback, useEffect, useRef, useState } from 'react';
export const MyComponent = () => {
const isMounted = useRef(true);
const [isFetching, setIsFetching] = useState(false);

const [data, setData] = useState(null);

// Can also be called from the button click
const getMyData = useCallback(() => {
if (isFetching) return;
setIsFetching(true);
fetch('get/my/data')
.then((res) => {
if (isMounted.current) {
setData(res.data);
}
})
.catch((err) => {
if (isMounted.current) {
setData("Error fetching data");
}
})
.finally(() => {
if (isMounted.current) {
setIsFetching(false);
}
});
}, []); // isFetching dependency warning as is, if added then infinite loop
useEffect(() => {
isMounted.current = true;
getMyData();
return () => {
isMounted.current = false;
};
}, [getMyData]);
return (
<div>
<button onClick={getMyData}>Update data</button>
<p>{data}</p>
</div>
);
};

我知道有很多这样的问题，但是我不能在检查组件是否安装的同时删除警告或无限循环。

下面是一些例子:example-1, example-2

Answer 1

将isFetching转换为ref，因此它的值将不依赖于函数:

const { useCallback, useEffect, useRef, useState } = React;
const MyComponent = () => {
const isMounted = useRef(true);
const isFetching = useRef(false);

const [data, setData] = useState([]);

// Can also be called from the button click
const getMyData = useCallback(() => {
console.log('call');
if (isFetching.current) return;
isFetching.current = true;
fetch('https://cat-fact.herokuapp.com/facts')
.then(res => res.json())
.then(res => {
if (isMounted.current) {
setData(res);
}
})
.catch((err) => {
if (isMounted.current) {
setData("Error fetching data");
}
})
.finally(() => {
if (isMounted.current) {
isFetching.current = false;
}
});
}, []); // isFetching dependency warning as is, if added then infinite loop
useEffect(() => {
isMounted.current = true;
getMyData();
return () => {
isMounted.current = false;
};
}, [getMyData]);
return (
<div>
<button onClick={getMyData}>Update data</button>
<ul>
{
data.map(({ _id, text }) => (
<li key={_id}>{text}</li>
))
}
</ul>
</div>
);
};
ReactDOM.render(
<MyComponent />,
root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>