reactjs 如何循环嵌套循环并显示数据

mitkmikd 于 2022-12-22 发布在 React

关注(0)|答案(1)|浏览(190)

嘿，我正在尝试显示来自此API数据的数据

{
    "status": "success",
    "data": [
        {
            "id": 1,
            "created_at": "2022-12-20T15:20:42.000000Z",
            "updated_at": "2022-12-20T15:20:42.000000Z",
            "lp_campaign_id": "61c158df57694",
            "lp_campaign_key": "MQkGFrhcbtx4BDzq87TP",
            "lp_supplier_id": "asdasd",
            "first_name": "Test",
            "last_name": "test",
            "phone": "+1234567893",
            "email": "test@gmail.com",
            "zip_code": "2356"
        },
        {
            "id": 2,
            "created_at": "2022-12-20T15:20:57.000000Z",
            "updated_at": "2022-12-20T15:20:57.000000Z",
            "lp_campaign_id": "61c158df57694",
            "lp_campaign_key": "MQkGFrhcbtx4BDzq87TP",
            "lp_supplier_id": "asdasd",
            "first_name": "Test",
            "last_name": "test",
            "phone": "+1234567893",
            "email": "test@gmail.com",
            "zip_code": "2356"
        },
        {
            "id": 3,
            "created_at": "2022-12-20T15:22:18.000000Z",
            "updated_at": "2022-12-20T15:22:18.000000Z",
            "lp_campaign_id": "61c158df57694",
            "lp_campaign_key": "MQkGFrhcbtx4BDzq87TP",
            "lp_supplier_id": "asdasd",
            "first_name": "Test",
            "last_name": "test",
            "phone": "+1234567893",
            "email": "test@gmail.com",
            "zip_code": "2356"
        }
    ]
}

我猜它有嵌套循环。那么我怎么用react js显示数据呢。我试过用react js，但是用下面的代码显示数据失败了。
我试过了

let [leads, setLeads] = useState([])

const url = "http://127.0.0.1:8000/api/data"

useEffect(() => {
    fetch(url).then(response => {
        console.log(response)
    })
    .then(result => {
        setLeads(result)
    })
    .catch(e => {
        console.log(e)
    })
})
 {
                            leads ?
                            leads.map(
                                (lead) => {
                                    return (
                                        <tr className="hover:bg-gray-100 p-3">
                                            <td>{lead.data.created_at}</td>
                                            <td>123</td>
                                            <td>123</td>
                                            <td>123</td>
                                            <td>123</td>
                                        </tr>
                                    )
                                }
                            ):

                            <>Data Not Found</>
                  
                        }

我对react js一点都不熟悉，所以我对它一无所知。显示数据的简单方法是什么？

reactjs

来源：https://stackoverflow.com/questions/74868911/how-can-i-loop-through-a-nested-loop-and-show-data

1条答案

按热度按时间

8yoxcaq71#

您可以尝试这段代码，这样您就可以获得响应并在响应中使用data属性中的数组。

let [leads, setLeads] = useState([]);
    
    const url = "http://127.0.0.1:8000/api/data";
    
    useEffect(() => {
      fetch(url)
        .then((response) => 
          (response.json())
        )
        .then((result) => {
          setLeads(result.data);
        })
        .catch((e) => {
          console.log(e);
        });
    },[]);
  return leads ? (
    leads.map((lead, index) => (
      <tr className="hover:bg-gray-100 p-3" key={lead.id}>
        <td>{lead.created_at}</td>
        <td>{lead.updated_at}</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
      </tr>
    ))
  ) : (
    <>Data Not Found</>
  );

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 如何循环嵌套循环并显示数据

1条答案

相关问题

热门标签

最新问答