Reactjs 如何在页面加载时仅显示消息，而不是闪烁的文本-React挂钩

我看到过与页面加载时显示消息相关的不同问题，但其中没有一个函数在

useffect

内部被调用的例子

问题：

无论如何，转到问题，我得到的闪烁文本从

“未经授权的访问”

变为

“授权的”

至少有几次（我的假设是由于状态更改），等等，从用户体验的角度来看，这看起来不太好

我期待什么？

有没有办法只显示

“未经授权的访问”/“已授权的”

消息而不显示闪烁的文本？

const User=（）=>{
const[type，setType]=useState（0）；
const[error，setError]=useState（“”）；
const[isloading，setIsLoading]=useState（true）；
const isCancelled=useRef（false）；
const getUserType=async（）=>{
const response=wait fetch（“/API_ROUTE”）；
const{type，error}=wait response.json（）；
如果（！response.ok | | error）{
如果（！isCancelled.current）设置错误（error）；
//console.log（“失败”，错误）；
}否则{
//console.log（“成功”，类型）；
如果（！isCancelled.current）设置类型（type）；
}
};
useffect（（）=>{
控制台日志（“挂载1”）；
getUserType（）；
设置加载（假）；
return（）=>{
isCancelled.current=true；
};
}, []);
返回(
{孤岛加载
“装载…”
：type！==2
？“未经授权的访问”
：“授权”}
);
};

在设置了正确的类型后，您可能应该更新您的

isLoading

标志

useEffect(() => {
   console.log("mounted1");
   getUserType();

   return () => {
     isCancelled.current = true;
   };
}, []);

useEffect(() => {
   setIsLoading(false);
}, [type, error]);

---

在设置了正确的类型后，您可能应该更新

isLoading

标志

useEffect(() => {
   console.log("mounted1");
   getUserType();

   return () => {
     isCancelled.current = true;
   };
}, []);

useEffect(() => {
   setIsLoading(false);
}, [type, error]);

---

在将isLoading设置为false之前，您没有等待异步函数

getUserType

完成：

getUserType（）；//这是异步的，您应该等待它。
设置加载（假）；//在实际抓取完成之前，您将'isLoading'设置为'false'

---

一个简单的解决方案是在获取数据后，在

getUserType

内调用

setIsLoading（false）

。

在将

isLoading

设置为false之前，您不会等待异步函数

getUserType

完成：

getUserType（）；//这是异步的，您应该等待它。
设置加载（假）；//在实际抓取完成之前，您将'isLoading'设置为'false'

---

一个简单的解决方案是在获取数据后在

getUserType

中调用

setIsLoading（false）

。

不幸的是，它仍然闪烁应该工作，但您需要添加一个条件，因为它将在类型或错误仍然

未定义时运行。不幸的是，它仍然闪烁应该工作，但是您需要添加一个条件，因为它将在类型或错误仍然
未定义时运行。我有点理解您的观点，现在在函数末尾移动
isLoading
后，它仍然闪烁。我不确定我是否可以创建一些工作演示，因为我正在使用API。关于复制此行为，您还有其他建议吗？您可以创建CodeSandbox并模拟fetch函数。我有点理解您的观点，现在在函数末尾移动
isLoading
后，它仍然在闪烁。我不确定我是否可以创建一些工作演示，因为我正在使用API。您对复制此行为还有其他建议吗？您可以创建CodeSandbox并模拟fetch函数。