使用axios的取消请求(cancel request)功能来避免不必要的useEffect调用。可以通过引入CancelToken来实现这个功能:
import axios from 'axios';
const CancelToken = axios.CancelToken;
let cancel;
useEffect(() => {
const fetchData = async () => {
const result = await axios.get('https://example.com/api', {
cancelToken: new CancelToken(function executor(c) {
cancel = c;
})
});
/* Fetching data and setting state */
};
fetchData();
return () => {
// Cancelling the request when the component unmounts
cancel();
};
}, []);
在这个示例代码中,我们使用了useEffect hook来获取数据,使用了axios的CancelToken来取消请求。在使用axios时,我们可以定义一个cancel函数,当组件卸载时,使用该函数来取消请求。
这种方法可以避免不必要的useEffect调用,特别是在组件已经卸载或不再需要用到数据时。