有没有办法阻止函数返回 jsx，直到在 React 功能组件中调用异步函数？答案

【问题标题】：Is there a way to stop the function from returning the jsx till an asyn function is called in a React functional Component?有没有办法阻止函数返回 jsx，直到在 React 功能组件中调用异步函数？
【发布时间】：2020-06-01 20:10:07
【问题描述】：

请看下面的代码：-

import React, { useState } from "react";

export const Context = React.createContext();

export default function ImportBefore() {
  const [message, setMessage] = useState("");

  (async () => {
    await new Promise(resolve => setTimeout(resolve, 5000));
    setMessage("Antha Rama Mayam!");
  })();

  return (
    <Context.Provider value={message}>Message is {message}</Context.Provider>
  );
}

我最初看到的输出是“Message is”，5 秒后是“Message is Antha Rama Mayam”。这符合预期。

有没有办法停止返回，直到异步函数返回并正确设置消息。

我尝试了 Suspense 和 useState with Lazy Loading。此外，useEffect 在这里并没有增加太多价值。有出路吗？

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

没有。

但是，您可以做的是在 message 为空或您能想象到的任何其他内容时返回加载微调器之类的内容。也许只是返回一个空的 div？

return (
    {message ? (
        <Context.Provider value={message}>Message is {message}</Context.Provider>
    ) : (
        <div></div>
    )}
)

【讨论】：