ReactJS 在使用 useEffect 钩子获取后重新渲染上下文

Question

I am currently trying to pass data with my context provider through the entire application but the hook that triggers, only returns it's initial value and doesn't re-trigger .

This is my application layout inside my main App component which doesn't hold any state.

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <UserContextProvider>
            <div className="container">
              <Header />
              <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/login" component={LoginPage} />
                <PrivateRoute exact path="/secret-page" component={SecretPage} />
              </Switch>
            </div>
          </UserContextProvider>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

Whenever the App component renders for the first time, it triggers the UserContextProvider which fires an onEffect hook. This hook tries to fetch some data but since the user is not logged in, it just returns it's original value [] .

Here is the Context Provider

const UserContextProvider = ({children}) => {
  const [userSettings, setUserSettings] = useState([]);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  useEffect(() => {
    if (userid !== null) {
      fetch(
        process.env.REACT_APP_API_URL + "/authenticated/get-permissions",
        requestOptions
      )
        .then(response => response.json())
        .then(response => {
          setUserSettings(response.data);
          setIsLoggedIn(true);
        })
        .catch(error => console.log(error));
    } else {
      console.log(userSettings);
      setIsLoggedIn(false);
    }
  }, []);
  return (
    <UserContext.Provider value={userSettings}>{children}</UserContext.Provider>
  );
};

Now when the code above fires initially, the userid value is null but after authentication in the LoginPage child component, it changes to a token. My issue is that even though userid 's value changes after login, the hook doesn't fire again.

I just want to mention that I get the userid value from local storage in a separate file and import it.

I've tried setting the userid value in the empty array argument inside the function but that doesn't work.

How can I make my useEffect hook to fire again after the userid value has changed?

--- EDIT-----

userid is import from another file called fetchRequestOptions in this way:

import {requestOptions, userid} from "./fetchRequestOptions";

Inside my fetchRequestOptions file I have the following code:

let userid = localStorage.getItem("userid");
let accessToken = localStorage.getItem("accesstoken");
let requestOptions ={ <my request options are here>}

Answer 1

In order for the hook that uses userid to re-run when it changes, you need to keep it inside a state. Then, LoginPage needs to be connected to the Context and use setUserid to update its value.

const UserContextProvider = ({ children }) => {
    const [userSettings, setUserSettings] = useState([]);
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    // If you are reading directly from localstorage you might
    // want to use localStorage.getItem("userid") as the initial value
    const [userid, setUserid] = useState(null);

    useEffect(() => {
        // ...
    }, [userid]);

    return (
        <UserContext.Provider value={{ userSettings, setUserid }}>
            {children}
        </UserContext.Provider>
    );
};

The key is that userid needs to be inside a state, this way it can trigger a new render in any Component where you need its latest value.

You might find it cleaner to have a specific custom hook, inside your Context, that handles the logic for the userid (fetch and update). This is a good option but it only makes userid available inside this context. If you need to use it somewhere else you will need to export it from the context value prop.

const useUserid = () => {
    const [userid, setUserid] = useState(null);

    useEffect(() => {
        const fetched_userid = //...
        setUserid(fetched_userid);
    }, []);

    return userid;
};

const UserContextProvider = ({ children }) => {
    // ...
    const userid = useUserid();

    useEffect(() => {
        // ...
    }, [userid]);

    return (
        <UserContext.Provider value={userSettings}>{children}</UserContext.Provider>
    );
};

Answer 2

Passing an empty array [] in an useEffect hook means that (as per React documentation)

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn't depend on any values from props or state, so it never needs to re-run

So, we need to pass props/state that acts as trigger for effect to re-render.

Answer 3

pass userid as an argument in the dependency array of the useEffect. This ensures the effect is run whenever userid changes.

  useEffect(() => {
   ...
  }, [userid]);