Reactjs 在返回之前不渲染useEffect

我的州

const [isEnabled, setIsEnabled] = useState(false);

GetUser（）

useffect（）

返回

    return (
       <div className="emailVerificationWrapper">
        {isEnabled ? <h1>true</h1> : <EmailVerificationFailed /> }
       </div>
    )

返回(
{isEnabled？true:}
)

返回在

设置启用之前呈现

，这会导致最终结果为

假

，但如果我重新加载网站（或控制台记录状态值），它将设置为

真

（根据需要）

在我的应用程序呈现

返回之前，如何使
设置为启用
以更新状态

请更新如下：

async function getUser() {
         verifyEmail(getTokenIdFromURL); /* Updates field in backend from false -> true */
         const response = await Axios.get(URL+getTokenIdFromURL)
         setIsEnabled(response.data.enabled) /* Checks if updated value is true and updates state */

    }

运行useffect后，发布渲染返回语句。您需要有一个加载状态来等待数据被提取

const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
    getUser();
    return () => {
        /* */
    };
}, []);

function getUser() {
     verifyEmail(getTokenIdFromURL); /* Updates field in backend from false -> true */
     Axios.get(URL+getTokenIdFromURL).then(function (response) {
        setIsLoading(false);
        setIsEnabled(response.data.enabled) 
    })
}
if(isLoading) {
   return <div>Loading...</div>
}
return (
   <div className="emailVerificationWrapper">
    {isEnabled ? <h1>true</h1> : <EmailVerificationFailed /> }
   </div>
)

const[isLoading，setIsLoading]=useState（true）；
useffect（（）=>{
getUser（）；
return（）=>{
/* */
};
}, []);
函数getUser（）{
verifyEmail（getTokenIdFromURL）；/*从false->true更新后端中的字段*/
get（URL+getTokenIdFromURL）。然后（函数（响应）{
设置加载（假）；
setIsEnabled（response.data.enabled）
})
}
如果（孤岛加载）{
返回加载。。。
}
返回(
{isEnabled？true:}
)
是的，谢谢。但结果仍然是一样的。这不起作用useEffect不接受异步函数同步函数返回承诺，effect函数只能返回未定义或函数。你试过这个吗？它起作用了吗？请检查这个，你可以在一个应用程序中尝试，看看它不起作用。在别人的博客上发帖并不能让事情变得更好。这也不能解决OP的问题，即渲染不等待结果。第一个原因是它不会等待，这不是承诺的工作方式，第二个原因是效果会在组件渲染后执行。@JikunL我看到它指向同一个博客，但在运行代码的同时，只要从async effect函数返回内容，就会收到警告。这不会改变任何事情吗？结果是一样的。在我重新加载页面之前，它将显示false。@Arasto，您确定要重新加载吗。API调用是成功的。此外，如果您可以创建一个演示，那么就更容易理解issue@Arasto您是否正在使用get请求更新服务器上的某些内容？@ShubhamKhatri我正在尝试创建一个代码笔，请稍候@HMR
verifyEmail
函数是一种使用Axios的post方法，它会更新字段。@Arasto那么您可能应该尝试
等待verifyEmail（getTokenIdFromURL）
或让verifyEmail返回一个值，指示其是否已验证，并保存一个请求。
async function getUser() {
         verifyEmail(getTokenIdFromURL); /* Updates field in backend from false -> true */
         const response = await Axios.get(URL+getTokenIdFromURL)
         setIsEnabled(response.data.enabled) /* Checks if updated value is true and updates state */

    }

useEffect(async () => {
        await getUser();
        return () => {
            /* */
        };
    }, []);

const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
    getUser();
    return () => {
        /* */
    };
}, []);

function getUser() {
     verifyEmail(getTokenIdFromURL); /* Updates field in backend from false -> true */
     Axios.get(URL+getTokenIdFromURL).then(function (response) {
        setIsLoading(false);
        setIsEnabled(response.data.enabled) 
    })
}
if(isLoading) {
   return <div>Loading...</div>
}
return (
   <div className="emailVerificationWrapper">
    {isEnabled ? <h1>true</h1> : <EmailVerificationFailed /> }
   </div>
)