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

React에 데이터가 있지만 솔루션을 렌더링할 수 없습니다. 1. 생성자에서 getXXX 메서드를 호출합니다. 2. getXXX 메서드에서 setState를 설정합니다. 3. getXXX 요청이 서버로부터 응답을 받으면 setState가 실행됩니다. 페이지 렌더링을 다시 트리거합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

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

react는 배경 데이터를 가져오고

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

• 원하는 결과: react의 구성 요소 배경 데이터를 가져와서 표시합니다. 페이지가 처음 렌더링될 때 표시됩니다. 구성 요소 외부에서 getXXX 메서드를 정의하고 axios 배경 결과를 요청하고 <code>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

버그 결과: 배경 데이터 수신 요청이 수신되었으며 결과가 올바르게 반환되었지만 페이지가 렌더링되지 않았습니다. GetXXX 결과를 ​​출력하려면 콘솔을 사용하세요. 결과가 정확합니다

버그 문제 해결: 백그라운드 수집이 결정되었습니다. 요청이 이루어지고 올바른 결과가 반환되며 프런트 엔드도 올바른 결과를 출력합니다. 즉, 데이터를 얻기 전에 페이지가 렌더링되지만 react 구성 요소는 먼저 메서드를 구성한 다음 render를 호출하는 것입니다. 따라서 비동기 문제일 수 밖에 없습니다

🎜분석: axios는 비동기 요청입니다. 이 메서드는 생성 메서드에서 호출되지만 결과가 즉시 얻어지지 않으므로 state에 값이 할당되고 결과는 비어 있어야 하므로 렌더링된 페이지에 데이터가 없습니다. 🎜🎜🎜🎜 시도: axios 요청을 사용하세요. code>render 메서드, 결과를 얻은 후 setState 메서드를 사용하여 결과를 state에 할당합니다. 결과적으로 setState가 페이지를 업데이트합니다. 즉, render 메서드를 호출하고 다음을 호출하므로 무한 루프가 발생하기 때문에 실행 시 오류가 보고됩니다. render 메서드의 는 무한 루프를 발생시킵니다🎜🎜🎜🎜이를 처리하는 올바른 방법: 생성 메서드에서 <code>getXXX를 호출하세요. > 메소드를 실행하고 getXXX 메소드 /code>에 setStategetXXX는 서버로부터 응답을 받고 <code>setState가 실행되면 페이지가 다시 렌더링됩니다. 요청 응답 시간은 서버 처리와 관련되므로 응답 시간이 매우 짧은 경우 프런트 엔드에서는 빈 데이터의 결과를 볼 수 없습니다. 백그라운드 응답 시간이 길면 Antd를 추가할 수 있습니다. > 구성요소Spin 로드, 프롬프트가 로드 중입니다🎜🎜🎜🎜🎜권장 학습: "🎜react 비디오 튜토리얼🎜"🎜🎜🎜

위 내용은 React에 데이터가 있지만 렌더링할 수 없으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!