有没有办法将反应钩子放在不是函数组件的函数中？答案

【问题标题】：Is there a way to put react hooks in a function that's not function component?有没有办法将反应钩子放在不是函数组件的函数中？
【发布时间】：2022-01-25 05:22:53
【问题描述】：

我正在尝试创建一个既不是组件也不是可在特定事件上调用的挂钩的函数。假设我有一个使用 axios 发布数据的简单功能，并且我想在发布成功后使用导航。这是示例

export const authLogin = (email, password) => {
    const config = {
        withCredentials: true,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRFToken': Cookies.get('csrftoken')
        }
    }

    let navigate = useNavigate();

    return dispatch => {
        console.log('Masuk ke dalam auth file');
        dispatch(authStart());
        axios.post('/log_in/', {
            email: email,
            password: password
        }, config)
            .then(res => {
                if (res.data.error) {
                    alert(res.data.error)
                    dispatch(authFail(res.data.error))
                }
                else {
                    const token = res.data.key;
                    const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
                    localStorage.setItem('token', token);
                    localStorage.setItem('expirationDate', expirationDate);
                    dispatch(authSuccess(token));
                    dispatch(checkAuthTimeout(3600));
                    alert('login berhasil')
                    navigate("/", { replace: true });
                }

            })
            .catch(err => {
                alert(err);
                dispatch(authFail(err))
            })
    }
}

我有一个错误说

但是当我尝试用大写字母更改函数名称时，又出现了一个问题，我该如何解决这个问题？

【问题讨论】：

就像它说的那样，只能在功能组件中使用钩子或其他钩子......为什么不将调用者设为钩子并从功能组件中调用它呢？否则，从你的函数中删除所有钩子调用并像普通函数一样使用它，不能同时使用:)
请创建一个minimal reproducible example，特别包括调用函数的地方。请注意，钩子和组件都不是由它们的命名方式决定的，而是由它们的使用方式决定的。
reactjs.org/docs/hooks-rules.html

标签： javascript reactjs react-hooks

【解决方案1】：

钩子必须附加到直接附加到 React 组件树的纤程上。您不能在组件树之外使用钩子，因为 React 无法跟踪它们（这就是为什么钩子必须始终以相同的顺序运行，并且不能是有条件的，因为 React 会跟踪他们内部的状态）。

您可以在组件之外使用钩子的唯一情况是来自另一个钩子。

简而言之，你必须能够从钩子调用中画一条直线返回到 React 渲染组件树。如果你不能，那么这是一个无效的钩子调用。

解决方案

...在您的情况下 - 只需将 navigate 函数作为参数传递给您的操作：

const MyComponent = () => {
 
   const navigate = useNavigate();

   const doSomethingHandler = () => {
      dispatch(authLogin(email,password,navigate))
   }

}


const authLogin = (email,password,navigate) => {

    // ...do your action and call the `navigate` parameter
    // when you need to
}

【讨论】：