Question

我正在尝试在应用程序页面中结合使用一些异步操作来馈送的多个上下文。我想不使用HttpContext.Current.SetSessionStateBehavior(System.Web.SessionState.SessionStateBehavior.Required);来组合这些上下文，因为它可能很冗长。例如，

Context.Provider

在这些上下文中的每一个中，我都用上下文包装孩子。铁

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

这可行，但是正如我前面提到的那样，它非常冗长，因此我想像objetcs一样使用Context来组合它们。我尝试过：

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;

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;

我该如何实现？

Answer 1

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

在不使用提供程序的情况下合并钩子

1 个答案: