有没有办法阻止函数返回 jsx，直到在 React 功能组件中调用 asyn 函数?

Question

请看下面的代码：-

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

正如我看到的输出最初是"消息是"，然后在 5 秒后它是">消息是安塔·拉玛·玛雅姆"。这是意料之中的。

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

我尝试了悬念并使用延迟加载状态。此外，useEffect在这里并没有增加太多价值。有出路吗？

Answer 1

No.

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

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