Home > Article > Web Front-end > What should I do if react has data but cannot render it?
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.
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
react's Component, when the page is rendered for the first time It shows
getXXX method is defined outside the component, and axios is used to request the background result. In This method is called in the constructor of Component, and the result of this method is assigned to the state attribute.
console to output the result of GetXXX. The result is correct.
react component is to construct the method first and then call it render. So it can only be an asynchronous problem
axios is an asynchronous request. This method is called in the construction method, but the result is not obtained immediately, so state is assigned a result member variable, and the result must be empty, so the rendered page has no data.
renderUse axios to request, and after obtaining the result, use the setState method to assign the result to state. As a result, an error is reported when running, because it will cause an infinite loop, because setState will update the page, that is, call the render method, and call setState## in the render method. #Will cause an infinite loop
method, and set in the getXXX method setState, so that the page will be rendered first (the data result is empty). When the request of getXXX receives the response from the server, when setState is 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 a Antd loading componentSpin, the prompt is loading
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!