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

## Problem description:

• Desired result: Get background data and display it in a

  react's Component, when the page is rendered for the first time It shows

• 's attempt: a

  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.

• bug result: The background data received the request, and The result is returned correctly, but the page is not rendered. Use

  console to output the result of GetXXX. 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

  react component is to construct the method first and then call it render. So it can only be an asynchronous problem

• Analysis:

  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.

• Attempt: in

  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

Correct solution: In the constructor, call the
• getXXX

  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

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!