反应 Axios 钩子答案

【问题标题】：React Axios Hooks反应 Axios 钩子
【发布时间】：2019-11-20 08:20:14
【问题描述】：

我在我的 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)

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

【问题讨论】：

BE 是什么意思？
@SuleymanSah 后端
@FarukT 谢谢，我会编辑问题:)
你的 useAxios 钩子没有被“保护”。每次 react 重新渲染 MyComponent，你的自定义钩子 useMyHook 都会被调用。然后在那个钩子里你总是做一个 axios 调用。您需要定义何时调用 useAxios 挂钩以及何时不调用的条件。为此，您应该使用 useEffect 钩子和 deps。
它似乎在 axios-hooks 库中被“保护”了。有一个 useEffect 并且在 [stringifiedConfig] 更新时我们调用了后端：github.com/simoneb/axios-hooks/blob/master/src/index.js

标签： reactjs axios react-hooks

【解决方案1】：

基本上，问题在于状态调度。每当我们更改状态时，调用 axios-hooks 的组件都会被卸载并再次安装，因此我们会进行第二次调用。

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

【讨论】：