在不使用 Provider 的情况下组合钩子答案

【问题标题】：Combine hooks without using Provider在不使用 Provider 的情况下组合钩子
【发布时间】：2020-09-17 19:15:56
【问题描述】：

我正在尝试在我的应用程序页面中将几个提供的上下文与一些异步操作结合起来。我想在不使用Context.Provider 的情况下组合这些上下文，因为它可能很冗长。例如，

<Route path="/discover">
  <MainContainer extraClass="discover-container" hasHeader={true}>
    <UserContext>
      <ContentContextProvider>
        <NotificationContext>
          <Discover />
        </NotificationContext>
      </ContentContextProvider>
    </UserContext>
  </MainContainer>
</Route>

在每个上下文中，我都用上下文包装了孩子。铁，

import React from "react";
import useAllContent from "utils/hooks/useAllContent";

const ContentContext = React.createContext({});

export const ContentContextProvider = ({ children }) => {
  const { allContent, setAllContents } = useAllContent([]);

  return (
    <ContentContext.Provider value={{ allContent, setAllContents }}>
      {children}
    </ContentContext.Provider>
  );
};

export default ContentContext;

这行得通，但正如我之前提到的那样非常冗长，所以我想使用像 objetcs 这样的上下文来在它们之间进行组合。我试过了：

import { useState, useEffect, useCallback } from "react";
import { DataStore, Predicates } from "@aws-amplify/datastore";
import { Content } from "models";

const useAllContent = (initialValue) => {
  const [allContent, setContent] = useState(initialValue);

  const setAllContents = useCallback(async () => {
    const contents = await DataStore.query(Content, Predicates.ALL);
    setContent(contents);
  }, []);

  useEffect(() => {
    if (allContent === 0) setAllContents();
  }, [allContent, setAllContents]);

  return { allContent, setAllContents };
};

export default useAllContent;

import React from "react";
import useAllContent from "utils/hooks/useAllContent";

const { allContent, setAllContents } = useAllContent([]);
const ContentContext = React.createContext({ allContent, setAllContents });

export default ContentContext;

但我违反了规则× Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

我怎样才能实现它？

【问题讨论】：

标签： javascript reactjs react-hooks react-context

【解决方案1】：

以您描述的方式组合React.Context 的实例将需要操作它们包含的值。但是如果不使用对应的Provider，就无法访问Context 的值。我对不喜欢冗长表示同情，但在这种情况下这是不可避免的。

【讨论】：