javascript – Fragen zur Verwendung von fetch zum Anfordern von Daten in React

Question

Als ich heute Fetch verwendet habe, um die Schnittstellendaten des React-Projekts zu verbessern, bin ich auf ein schwieriges Problem gestoßen.
Die Geschäftslogik lautet: Bestimmen Sie zunächst die Identität des Benutzers und zeigen Sie ihm dann die entsprechende Schnittstelle.
Aber Fetch ruft Daten asynchron ab und das Ergebnis wird zuerst gerendert, dann werden die Daten zurückgefordert (die Datenanforderung ist langsamer als das Rendern der Seite), und dann wird der Anzeigestatus der Seite durch den Status geändert.
Die Seite zeigt zunächst eine Benutzeroberfläche an, und nach 1 bis 2 Sekunden ändert sich der Status und die Benutzeroberfläche ändert sich erneut. Gibt es eine Lösung?
Es ist am besten, zuerst die Daten zu akzeptieren, dann die Beurteilung abzuschließen und dann die Schnittstelle zu rendern.

Answer 1

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

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

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

Answer 2

弄个loading提示框，
等数据请求完以后再进行渲染页面

Answer 3

将用户的身份的状态先存在localStorage中，第一次先从localStorage取