如何 return Provider 在 React 中的承诺

Question

我有一个提供程序在加载时（一次）做一些工作。它为地图添加一个脚本标签，然后在加载该脚本时初始化地图。

我希望children能够使用悬念。我想 return 从那个提供者那里得到一个承诺，如果没有解决（悬念）或者它 return 是地图。

我不知道如何在我的组件中执行此操作。值得注意的是，我正在使用 nextJS，所以我必须确保我也在客户端。

我做了一个code sandbox来简化它：

function App() {
  return (
    <MyProvider>
      <Suspense fallback={<h1>Loading</h1>}>
        <Child />
      </Suspense>
    </MyProvider>
  );
}

Child 使用地图并显示它，在本例中它只是文本：

const Child = () => {
  const { data } = useContext(context);

  const result = data.read();

  return <div>Result: {result}</div>;
};

这是提供商：

const MyProvider = ({ children }) => {
  useEffect(() => {
    // I do asynchronous work here which adds a script tag and when
    // it is fully loaded initializes a map. How do I pass this promise
    // down to children in a way that will work with suspense?
    const data = wrapPromise(
      new Promise(resolve => {
        setTimeout(() => {
          console.log("fetched data");
          resolve({
            name: "Ringo Starr"
          });
        }, 1000);
      })
    );
  }, []);
  return <context.Provider value={{ data }}>{children}</context.Provider>;
};

Answer 1

您想创建一次承诺，然后 memoize 它：

const data = useMemo(() => new Promise(resolve => {
  setTimeout(resolve, 1000, { name: "Ringo Starr" });
}), []);

如何 return Provider 在 React 中的承诺

How to return a promise from a Provider in react

javascript

reactjs

react-suspense