React Axios Hooks

Question

我在react项目中使用axios钩子。我有一个问题，每当我重新渲染组件时，都会调用后端，而在开始时，同一个端点会被调用两次。我以以下方式使用它：

import useMyHook from '../../hooks/useMyHook ';
export default function MyComponent() {
const { getData } = useMyHook (category);
...
<Button onClick={getData}...
}

**调用getData来刷新数据(所以在这里再次调用后端是正常的(

export default function useMyHook(category) {
const { language, contextData,  dispatch } = useAppContext();
const config = {... url, headers, params ...};
const opts = { manual: false };
const [{ data: myData, loading, error }, reFetch] = useAxios(config, opts);
useEffect(() => {
if (_.isEmpty(contextData) && !_.isEmpty(myData)) {
dispatch({ type: DATA_LOADED, payload: myData});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [myData]);
const getData = () => {
dispatch({ type: DATA_RESET});
reFetch();
};
return { loading, error, getData};
}

我的实现有什么问题吗？PS。我看到useAxios有

useAxios(){...}, [stringifiedConfig]) and stringifiedConfig=JSON.stringify(config)

根据我的理解，如果配置没有改变，它就不应该重新调用后端。

Answer 1

基本上，问题是由于状态调度。每当我们更改状态时，调用axios钩子的组件都会被卸载并再次挂载，因此我们会进行第二次调用。

解决方法是检查组件的useEffect中是否未定义该值，然后调用axios钩子并禁用useAxios中的自动调用{manual:true}。