无法在另一个函数中使用钩子调用函数答案

【问题标题】：Cannot call a function using hooks in another function无法在另一个函数中使用钩子调用函数
【发布时间】：2022-01-05 09:48:03
【问题描述】：

注销功能用于通过调用 API 并从 LocalStorage 和 Redux 存储中删除该用户的信息来注销用户。因此，此函数使用两个挂钩：useDispatch 和 useFetch（自定义挂钩）

import {useDispatch} from 'react-redux'
import {disconnectUser} from 'store/authentication/authentication.slice'
import useFetch from 'api/useFetch'
import {routes} from 'routes/url'

type ResponseAPI = Record<string, never>

function logout(): void {
  const dispatch = useDispatch()

  const {call: disconnect} = useFetch<ResponseAPI>('auth/logout', {
    fetchOnLoad: false,
    method: 'POST',
  })

  disconnect()
    ?.then(() => {
      dispatch(disconnectUser())
      localStorage.removeItem('authenticated')
      localStorage.removeItem('decodedId')
      localStorage.removeItem('token')
      localStorage.removeItem('username')
      location.replace(routes.login)
    })
    .catch(error => Promise.reject(error))

  return
}

export default logout

我想在一个按钮中使用这个注销功能，只要用户点击注销按钮，它就会被注销。

const LogoutButton = (): JSX.Element => {
  return (
    <div className={styles.container}>
      <Button action={() => logout()}>Logout</Button>
    </div>
  )
}

export default LogoutButton

很遗憾，我收到了这个错误：

错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一：

您可能有不匹配的 React 版本和渲染器（例如 React DOM）

您可能违反了 Hooks 规则

您可能在同一个应用程序中拥有多个 React 副本有关如何调试和解决此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

你有什么想法吗？非常感谢你

【问题讨论】：

错误信息说明了一切：Hooks 只能在函数组件内部调用，function logout(): void 不是组件

标签： javascript reactjs react-hooks

【解决方案1】：

logout 不是一个函数，它是钩子，你不能在函数内部使用钩子，因为当你做action={() => logout()} 时，你是在函数内部包装钩子。在函数组件中是无效的。

<Button action={logout}>Logout</Button>

另一种方式

function useLogout() {
  const dispatch = useDispatch();

  const { call: disconnect } =
    useFetch <
    ResponseAPI >
    ("auth/logout",
    {
      fetchOnLoad: false,
      method: "POST",
    });

  const logout = () => {
    disconnect()
      ?.then(() => {
        dispatch(disconnectUser());
        localStorage.removeItem("authenticated");
        localStorage.removeItem("decodedId");
        localStorage.removeItem("token");
        localStorage.removeItem("username");
        location.replace(routes.login);
      })
      .catch((error) => Promise.reject(error));
  };

  return { logout };
}

// Component
const LogoutButton = (): JSX.Element => {
  const { logout } = useLogout();
  return (
    <div className={styles.container}>
      <Button action={() => logout()}>Logout</Button>
    </div>
  );
};

【讨论】：