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

Question

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

Answer 1

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

<div>

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

</div>

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