如何通过嵌套循环循环并显示数据

Question

嘿，我试图显示数据从这个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": "[phone]",
"email": "[e-mail]",
"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": "[phone]",
"email": "[e-mail]",
"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": "[phone]",
"email": "[e-mail]",
"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一点也不熟悉。有些我不知道。显示数据的简单方法是什么?

Answer 1

您可以尝试这段代码，这样您就可以获得响应并在响应中使用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</>
);