title: react list rendering failed
body: <p>environment：react 17.x、umi 3.5.21 <br/><br/>
  In this code below, I send a request and build an array of components, using <code>console.log(hosCardArr)</code> in <code>then</code> has content</p>
  <pre><code>let hosCardArr: any[] = [];
      useEffect(() =&gt; {
          getHosList({ _location: location, _level: level }).then(function (
              response: returnHosInfo[],
          ) {
              let arr: any[] = [];
  
              for (let i = 0; i &lt; response.length; i++) {
                  let e: returnHosInfo = response[i]
                  if (i % 2 == 0) {
                      arr.push(&lt;HosCard name={e.name} level={e.level} openTime={e.openTime} domLocation='left' /&gt;)
                  } else {
                      arr.push(&lt;HosCard name={e.name} level={e.level} openTime={e.openTime} domLocation='right' /&gt;)
                  }
              }
  
              hosCardArr = arr
          });
      });
  </code></pre>
  <p>In this code below, I render the array, using <code>console.log(hosCardArr)</code> in <code>&lt;div&gt;&lt;div/&gt;</code> the result is <code>[]</code></p>
  <pre><code>&lt;div&gt;{hosCardArr}&lt;/div&gt;
  </code></pre>
  <p>The end result is that the elements in the array are not displayed</p>