如何遍歷嵌套循環並顯示數據

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": "+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 一點都不熟悉。 我對此一無所知。 顯示數據的簡單方法是什么？

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</>
  );