0

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

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

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

我做了一个代码沙箱来简化它：

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

1 回答 1

1

你想创建一次承诺，并记住它：

const data = useMemo(() => new Promise(resolve => {
  setTimeout(resolve, 1000, { name: "Ringo Starr" });
}), []);
于 2020-04-22T16:34:47.453 回答