关于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回调中，这样就可以实现获取了数据再进行渲染。不过我没有试验，应该是可行的。如果觉得我的回答解决了你的问题，请点击采纳答案如果有什么疑问请评论区提问。