在上下文中调用 React 钩子

Question

我正在使用 https://github.com/flatlogic/react-material-admin，这是一个基于Material UI和设计React Admin Console，具有反应context和hooks。

该项目为用户UserContext.js定义了一个上下文，代码很简单(https://raw.githubusercontent.com/flatlogic/react-material-admin/master/src/context/UserContext.js)：

import React from "react";
var UserStateContext = React.createContext();
var UserDispatchContext = React.createContext();
function userReducer(state, action) {
switch (action.type) {
case "LOGIN_SUCCESS":
return { ...state, isAuthenticated: true };
case "SIGN_OUT_SUCCESS":
return { ...state, isAuthenticated: false };
default: {
throw new Error(`Unhandled action type: ${action.type}`);
}
}
}
function UserProvider({ children }) {
var [state, dispatch] = React.useReducer(userReducer, {
isAuthenticated: !!localStorage.getItem("id_token"),
});
return (
<UserStateContext.Provider value={state}>
<UserDispatchContext.Provider value={dispatch}>
{children}
</UserDispatchContext.Provider>
</UserStateContext.Provider>
);
}
function useUserState() {
var context = React.useContext(UserStateContext);
if (context === undefined) {
throw new Error("useUserState must be used within a UserProvider");
}
return context;
}
function useUserDispatch() {
var context = React.useContext(UserDispatchContext);
if (context === undefined) {
throw new Error("useUserDispatch must be used within a UserProvider");
}  
return context;
}
export { UserProvider, useUserState, useUserDispatch, loginUser, signOut };
// ###########################################################
function loginUser(dispatch, login, password, history, setIsLoading, setError) {  
setError(false);
setIsLoading(true);
if (!!login && !!password) {
setTimeout(() => {
localStorage.setItem('id_token', 1)
setError(null)
setIsLoading(false)
dispatch({ type: 'LOGIN_SUCCESS' })
history.push('/app/dashboard')
}, 2000);
} else {
dispatch({ type: "LOGIN_FAILURE" });
setError(true);
setIsLoading(false);
}
}
function signOut(dispatch, history) {
localStorage.removeItem("id_token");
dispatch({ type: "SIGN_OUT_SUCCESS" });
history.push("/login");
}

如您所见，loginUser代码是虚拟的，不会调用任何API。我尝试使用带有钩子的 api fetch 将其连接到服务器。我使用了swr(https://github.com/zeit/swr)，这似乎很容易

`....useSWR('/api/login'); ...`

我收到错误：

React Hook "useSWR" is called in function "loginUser" which is neither a React 
function component or a custom React Hook function  react-hooks/rules-of-hooks

看来我不能把取物放在这里。但从逻辑上讲，这是它应该在的地方！

我如何使用swr或这里？！

Answer 1

你需要做这样的事情：

function FetchOnClick() {
const [shouldFetch, setShouldFetch] = React.useState(false);
const { data } = useSWR(!shouldFetch ? null : "/api/users/1", fetcher);
return (
<>
<button disable={shouldFetch} onClick={ () => setShouldFetch(true) }>Fetch</button>
{data ? <h1>{data.fullName}</h1> : null}
</>
);
}

灵感来自@sergiodxa的代码：https://github.com/vercel/swr/issues/254