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 중국어 웹사이트의 기타 관련 기사를 참조하세요!