如何在反应中从提供者返回承诺

Question

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

我希望孩子们能够使用悬念。我想从那个提供者那里返回一个承诺，如果没有解决（出于悬念）或者它返回地图。

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

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

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

孩子使用地图并显示它，在这种情况下它只是文本：

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

你想创建一次 Promise，然后 memoize 它：

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