从后端获取数据后，如何在 React 中循环渲染元素？

Question

如何循环遍历来自后端的数据并根据它渲染组件？

我试过这样的事情：

import React, { useEffect } from 'react';
import BuildingItem from './components/buildingItem';
import { Config } from './config/config';

export default function Buildings() {

  const buildings = [];

  useEffect(() => {
    fetch(Config.domain + 'kingdom/buildings', {
      headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
    })
      .then(res => res.json())
      .then(data => {
        
        for(let i = 0; i < data.length; i++) {
          buildings.push(<BuildingItem type={data[i].type} level={data[i].level} />);
        }
      })
  })

  return (
    <div className='buildings'>
      <div className='buildings-container'>
        {buildings}
      </div>
    </div>
  );
}

返回时也尝试过类似的方法

<div className='buildings-container'>
        {buildings.map((item)=> (
              item
        )}
</div>

Answer 1

在这里使用状态，然后通过它进行映射。

而不是这个：

 .then(data => {
        
        for(let i = 0; i < data.length; i++) {
          buildings.push(<BuildingItem type={data[i].type} level={data[i].level} />);
        }
      })

使用React.useState，例如：const [data, setData] = useState()代替const buildings = [];

 .then(data => {
       // create state like this for example: const [data, setData] = useState() instead of const buildings = [];
      setData(data)
  })

然后在 jsx 中做这样的事情：

{
data.map((item, idx) => <BuildingItem type={item.type} level={item.level} />)
}

Answer 2

试着改变这样的事情。事情是将项目推到 const buildings = [] 没有效果。所以你需要使用useState hook

import React, { useEffect, useState } from 'react';
import BuildingItem from './components/buildingItem';
import { Config } from './config/config';

export default function Buildings() {

  const [buildings, setBuildings] = useState([]);

  useEffect(() => {
    fetch(Config.domain + 'kingdom/buildings', {
      headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
    })
      .then(res => res.json())
      .then(data => setBuildings(data))
  })

  return (
    <div className='buildings'>
      <div className='buildings-container'>
        {buildings.map((item)=> (
          <BuildingItem type={item.type} level={item.level} />
        )}
      </div>
    </div>
  );
}

从后端获取数据后，如何在 React 中循环渲染元素？

How to loop and render elements in React after we got the data from the backend?

loops

jsx

reactjs

react-native