React - <Context.Provider> 需要 value 道具。您是拼错了还是忘记传递了？

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 是我的用例的好工具。

问题是我收到了这个警告：

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

是否'illegal'以这种方式使用上下文而不向消费者传递任何价值？

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

React - <Context.Provider> 需要 value 道具。您是拼错了还是忘记传递了？

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

javascript

reactjs

react-hooks