javascript - 关于react使用fetch请求数据的问题

问题描述

问 题

今天使用fetch去完善react项目的接口数据的时候，遇上了比较棘手的问题。
业务逻辑是：首先判断用户的身份，然后为他展现相对应的界面。
但是fetch是异步获取数据的，结果就出现了，页面首先渲染完，然后数据请求回来（数据请求的比页面渲染的要慢），然后通过state,改变了页面的显示状态。
这样就出现了，页面首先展示了一个界面，然后过了1~2秒之后，状态改变，界面又变化了，用户体验很差。请问有什么解决的办法么。
最好是先接受了数据，再判断完，再去渲染界面。

解决方案

这个其实很简单，你在render的return中做一个三元运算符。判断数据是否获取到。

<div>
{this.state.data==null?<div></div>:<YourTemplate/>}
</div>

还有一个思路就是你把fetch 写在render中，把return的模版放在fetch 的then回调中，这样就可以实现获取了数据再进行渲染。不过我没有试验，应该是可行的。
如果觉得我的回答解决了你的问题，请点击
采纳答案
如果有什么疑问请评论区提问。

这篇关于javascript - 关于react使用fetch请求数据的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！