javascript - 无法在另一个函数中使用 Hook 调用一个函数

Question

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

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

不幸的是我得到了这个错误:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

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

Answer 1

logout 不是一个函数，它是一个钩子(Hook)，你不能在函数内部使用钩子(Hook)，因为当你执行 action={() => logout()} 时，你正在将钩子(Hook)包装在里面功能。这在功能组件中无效。

<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>
  );
};