javascript - 如何为对象数组解决此输出 [object Object]？

Question

我正在尝试通过映射函数传递对象数组，但是在尝试获取这些对象时，我收到[object Object]了输出。我传递的数据是

const Data =[
    {
   "Date":"Thu Jul 06 2021" ,
   "Time": "01:00 PM PST -03:00 PM PST",
   "Availabilty":"9 seats available",
  
  },
  {
   "Date":"Fri Jul 07 2021" ,
   "Time":"01:00 PM PST -03:00 PM PST",
   "Availabilty":"7 seats available",
  },
  {
   "Date":"Sat Jul 08 2021" ,
   "Time": "01:00 PM PST -03:00 PM PST",
   "Availabilty":"10 seats available",
  },
  {
   "Date":"Sun Jul 09 2021" ,
   "Time": "01:00 PM PST -03:00 PM PST",
   "Availabilty":"3 seats available",
  },
  {
   "Date":"Mon Jul 10 2021" ,
   "Time": "01:00 PM PST -03:00 PM PST",
   "Availabilty":"14 seats available",
  },
  
  {
   "Date":"Wed Jul 12 2021" ,
   "Time":"01:00 PM PST -03:00 PM PST",
   "Availabilty": "12 seats available",
  },
  {
   "Date":"Thu Jul 13 2021" ,
   "Time":"01:00 PM PST -03:00 PM PST",
   "Availabilty": "15 seats available",
  },
  {
   "Date":"Fri Jul 14 2021" ,
   "Time":"01:00 PM PST -03:00 PM PST",
   "Availabilty":"8 seats available",
  },
  {
   "Date":"Sat Jul 15 2021" ,
   "Time":"01:00 PM PST -03:00 PM PST",
   "Availabilty":"1 seats available"
  } 
  ]

我将其传递给的地图功能

      {Data.map((d, i) => {
          return (
           <div key={i} >
      <table>
      <tr>
        <td className="date">{d.Date}</td>
        <td className="time">{d.Time}</td>
        <td className="availability" >{d.Availabilty}</td>
        {console.log(d)}
        <td><button value={d} onClick={(e)=>{
          decNum(e);
          }}>Book Now</button></td>
      </tr>

</table>

当我试图通过 onclick 事件获取值时，我得到了提到的[object Object]输出。我能够得到值，d.Date or D.Time or D.Availabilty 但我想要的是得到 d 的结果而不是特定的键。先感谢您。

标签： javascripthtmljqueryreactjs

Answer 1

尝试这个：

{Data.map((d) => {
  const {Date: date, Time, Availabilty} = d;
  return (
   <div key={`${date}${Time}${Availabilty}`}>
     <table>
        <tr>
          <td className="date">{date}</td>
          <td className="time">{Time}</td>
          <td className="availability" >{Availabilty}</td>
          <td><button value={d} onClick={decNum}>Book Now</button></td>
        </tr>
      </table>
    </div>
  )
}