What should I do if react has data but cannot render it?-Front-end Q&A-php.cn

React has data but cannot render the solution: 1. In the constructor method, call the getXXX method; 2. Set setState in the getXXX method; 3. When the getXXX request receives the response from the server, When executing setState, just re-trigger page rendering.

What should I do if react has data but cannot render it?

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What should I do if React has data but cannot render it?

react gets the background data and renders the page without displaying

## Problem description:

Desired result: Get background data and display it in a
react'sComponent, when the page is rendered for the first time It shows
's attempt: a
getXXXmethod is defined outside the component, andaxiosis used to request the background result. InThis method is called in the constructor of Component, and the result of this method is assigned to thestateattribute.
bug result: The background data received the request, and The result is returned correctly, but the page is not rendered. Use
consoleto output the result ofGetXXX. The result is correct.
bug troubleshooting: determined The background receives the request and returns the correct result, and the front end also outputs the correct result, which means that the page is rendered before the data is obtained, but the loading order of the
reactcomponent is to construct the method first and then call itrender. So it can only be an asynchronous problem
Analysis:
axiosis an asynchronous request. This method is called in the construction method, but the result is not obtained immediately, sostateis assigned a result member variable, and the result must be empty, so the rendered page has no data.
Attempt: in
renderUseaxiosto request, and after obtaining the result, use thesetStatemethod to assign the result tostate. As a result, an error is reported when running, because it will cause an infinite loop, becausesetStatewill update the page, that is, call therendermethod, and callsetState## in therendermethod. #Will cause an infinite loop
getXXX
method, and setin thegetXXXmethod setState, so that the page will be rendered first (the data result is empty). When the request ofgetXXXreceives the response from the server, whensetStateis executed, the page rendering will be re-triggered. . Because the request response time is related to server processing, when the response time is very short, the front end will not see the result of empty data. If the background response time is long, you can add aAntdloading componentSpin, the prompt is loading

Recommended learning: "

react video tutorial

The above is the detailed content of What should I do if react has data but cannot render it?. For more information, please follow other related articles on the PHP Chinese website!