在 React 组件的 API 响应中从对象数组输出数组

Question

我有来自 API 的数据，它是一个对象数组，对象中有一个数组，我试图在我的 React 组件上输出。它不显示数组，而是显示数组中项目的联合版本

{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>}

这是我试图在组件

中显示为数组的json数据station_path

[{"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"},

Answer 1

可以使用JSON.stringify(ride.station_path)来显示数组。

在 React 组件的 API 响应中从对象数组输出数组

output an Array from an Array of objects in an API response in react component

arrays

api

reactjs