在上下文中调用 React Hook

Question

I am using the https://github.com/flatlogic/react-material-admin which is an React Admin Console base on Material UI and design with react context and hooks .

The project defines a Context for User UserContext.js , the code is simple ( 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");
}

As you can see the loginUser code is dummy and is not calling any API. I tried to use the api fetch with hook to connect it to a server. I used swr ( https://github.com/zeit/swr ) which seems easy

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

I got the error:

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

It seems that I can not put the fetch here. But logically it is the place where it should be!

How can I use swr or here ?!

Answer 1

You need to do something like this:

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

Inspired by @sergiodxa's code here: https://github.com/vercel/swr/issues/254