Javascript 如何在react中返回提供者的承诺

我有一个提供者，它在加载（一次）时执行一些工作。它为映射添加一个脚本标记，然后在加载该脚本时初始化映射

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

我不知道如何在我的组件中实现这一点。当然，我使用的是nextJS，所以我必须确保我也在客户端

我做了一个简单的尝试：

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 Child=（）=>{
const{data}=useContext（上下文）；
const result=data.read（）；
返回结果：{Result}；
};

以下是提供商：

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

constmyprovider=（{children}）=>{
useffect（（）=>{
//我在这里做异步工作，它添加了一个脚本标记和
//它已完全加载并初始化映射。我如何传递此承诺
//以一种充满悬念的方式来对待孩子？
const data=包装(
新承诺（解决=>{
设置超时（（）=>{
日志（“获取的数据”）；
决心({
名称：“林戈·斯塔尔”
});
}, 1000);
})
);
}, []);
返回{children}；
};

您想创建一次承诺，并将其记下：

---

这是否也只在客户端的挂载上运行一次？今晚我要试一试，谢谢！

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