React - value 屬性是必需的<Context.Provider> . 你是拼錯了還是忘記通過了？

Question

我已經實現了一個 React 上下文，它在掛載時監聽我的數據庫的一個文檔。

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

我的目的是在一個包含整個應用程序的全局組件中收聽這個文檔……我認為 Context 是我用例的好工具。

問題是我收到了這個警告：

警告： <Context.Provider>需要value屬性。 你是拼錯了還是忘記通過了？

在不向消費者傳遞任何價值的情況下以這種方式使用上下文是否“非法”？

Answer 1

這可能更適合作為自定義鈎子。 這是一個示例實現：

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