React - value 属性是必需的<Context.Provider> . 你是拼错了还是忘记通过了？

Question

I have implemented a React context which listens to one document of my database when it is mounted.

function AccountStateProvider({ currentUser, children }) {
  const { signOut } = useSignOut();

  /**
   * Handles the current user's account deletion, signing out from the active
   * session.
   *
   * @returns {void} Nothing.
   */
  const handleOnAccountDeleted = () => {
    signOut(false);
  };

  useEffect(() => {
    if (!currentUser.data?.id) {
      return undefined;
    }

    //
    // Forces the logout of all active sessions on different mobile
    // devices after the user's account deletion.
    //
    const unsubscribe = onAccountDeleted(
      currentUser.data.id,
      handleOnAccountDeleted
    );

    return () => {
      unsubscribe();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentUser.data?.id]);

  return (
    <AccountStateContext.Provider>
      {children}
    </AccountStateContext.Provider>
  );
}

My purpose is to listen to this document in a global component which wraps the entire app... and I think that Context is a good tool for my use case.

The problem is that I am getting this warning:

Warning: The value prop is required for the <Context.Provider> . Did you misspell it or forget to pass it?

Is it 'illegal' to use context this way without passing any value to the consumers?

Answer 1

This would likely be better suited as a custom hook. Here's an example implementation:

function useAccountState(currentUser) {
  const { signOut } = useSignOut();

  /**
   * Handles the current user's account deletion, signing out from the active
   * session.
   *
   * @returns {void} Nothing.
   */
  const handleOnAccountDeleted = () => {
    signOut(false);
  };

  useEffect(() => {
    if (!currentUser.data?.id) {
      return undefined;
    }

    //
    // Forces the logout of all active sessions on different mobile
    // devices after the user's account deletion.
    //
    const unsubscribe = onAccountDeleted(
      currentUser.data.id,
      handleOnAccountDeleted
    );

    return () => {
      unsubscribe();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentUser.data?.id]);

  return null;
}