React에 데이터가 있지만 렌더링할 수 없으면 어떻게 해야 하나요?

을 표시하지 않고 페이지를 렌더링합니다. 문제 설명:

• 원하는 결과:react의구성 요소배경 데이터를 가져와서 표시합니다. 페이지가 처음 렌더링될 때 표시됩니다. 구성 요소 외부에서getXXX메서드를 정의하고axios 배경 결과를 요청하고 Component의 생성자에서 이 메서드를 호출하고 이 메서드의 결과를state특성에 할당합니다.react的Component获取后台的数据并显示，页面第一次渲染时就显示

• 进行的尝试：在组件外定义了一个getXXX方法，使用axios请求后台的结果，在Component的构造方法里调用该方法，将该方法的结果赋值给state属性里

• bug结果： 后台数据接收到了请求，并正确返回结果，但是页面却没有渲染，使用console输出GetXXX的结果，结果是正确的

• bug排查：已确定后台收到请求并返回正确结果，前端也输出正确结果，也就说明是页面渲染先于获取到数据，但是react组件的加载顺序是先构造方法，再去调用render。所以只可能是异步的问题

• 分析:axios是一个异步请求，构造方法中调用这个方法，但是没有立刻获取到结果，所以state赋值的是一个 结果的成员变量，结果肯定是空，所以渲染的页面也无数据的

• 进行的尝试： 在render方法里使用axios请求，获取到结果后使用setState方法将结果赋值给state。结果运行报错，因为会造成死循环，因为setState会更新页面，即调用render方法，在render方法里调用setState会造成死循环

• 正确处理方：在构造方法里，调用getXXX方法，在getXXX方法里设置setState,这样页面会先进行渲染（数据结果为空），当getXXX的请求收到服务器的响应后，执行setState时，会重新触发页面渲染。因为请求响应的时间与服务器处理有关，当响应时间很短时，前端就看不见数据为空的结果，后台响应时间较长的情况，可以加一个Antd的加载组件Spin