我有來自 API 的資料，它是一個物件陣列，我試圖在我的反應組件上輸出的物件中有一個陣列。它不顯示陣列，而是顯示陣列中專案的連接版本
{rides && <div>{rides.map((ride)=>
(<div >
<div className="flex bg-[#111] text-white my-3"key={ride.id} >
<div className="card bg-[#111] m-4 rounded-xl">
<div className="flex">
<div className="imageBox">
<img className="rounded" src={ride.map_url} alt="" />
</div>
<div className="contentBox mx-3">
<p className="my-2">Ride id: {ride.id}</p>
<p className="my-2">Origin Station: {ride.origin_station_code}</p>
<p className="my-2">Origin Path: {ride.station_path}</p>
<p className="my-2">Date: {ride.date}</p>
<p className="my-2">Distance</p>
</div>
</div>
</div>
</div>
</div>
)
)}</div>}
這是我試圖在組件中將 station_path 顯示為陣列的 json 資料
[{"id":515,"origin_station_code":15,"station_path":[28,31,43,57,63,76,86],"destination_station_code":90,"date":"02/06/2022 03:50 PM","map_url":"https://picsum.photos/200","state":"Delhi","city":"Delhi"},{"id":464,"origin_station_code":5,"station_path":[55,60,72,86],"destination_station_code":90,"date":"03/10/2022 07:53 PM","map_url":"https://picsum.photos/200","state":"Dadra and Nagar Haveli","city":"Silvassa"},{"id":941,"origin_station_code":18,"station_path":[46,58,60,79,86],"destination_station_code":99,"date":"04/03/2022 01:53 PM","map_url":"https://picsum.photos/200","state":"Chhattisgarh","city":"Durg"},{"id":197,"origin_station_code":9,"station_path":[67,71,80],"destination_station_code":95,"date":"02/04/2022 04:10 PM","map_url":"https://picsum.photos/200","state":"Telangana","city":"Adilabad"},{"id":792,"origin_station_code":14,"station_path":[53,64,79,88],"destination_station_code":90,"date":"03/03/2022 09:29 AM","map_url":"https://picsum.photos/200","state":"Meghalaya","city":"Shillong"},
uj5u.com熱心網友回復：
可以JSON.stringify(ride.station_path)用來顯示陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/466608.html