Question

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

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-hooks的组件都会被卸载并再次安装，因此我们进行第二次调用。

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

反应Axios挂钩

1 个答案: