Как вернуть обещание от провайдера в ответ - PullRequest
Новая
       62

Как вернуть обещание от провайдера в ответ

0 голосов
/ 22 апреля 2020

У меня есть провайдер, который выполняет некоторую работу при загрузке (один раз). Он добавляет тег сценария для карты, а затем при загрузке этого сценария инициализирует карту.

Я хочу, чтобы дети могли использовать неизвестность. Я хотел бы вернуть от этого провайдера обещание, которое либо выдает, если не решено (для ожидания), либо возвращает карту.

Я не могу понять, как это сделать внутри моего компонента. Следует отметить, что я использую следующий JS, поэтому я должен убедиться, что я тоже на стороне клиента.

Я сделал кодовую песочницу , чтобы упростить ее: 

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

1 Ответ

1 голос
/ 22 апреля 2020

Вы хотите создать обещание один раз, а запомнить это: 

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