每次单击按钮后，我们如何将通过单击事件传递的每个对象存储在数组中？答案

【问题标题】：How can we store every Object passed through a on-click event in an array after each time the button is clicked?每次单击按钮后，我们如何将通过单击事件传递的每个对象存储在数组中？
【发布时间】：2021-06-29 03:17:15
【问题描述】：

我正在尝试在地图功能中传递一个按钮，然后尝试获取每个单击事件函数后得到的数组中的所有值。地图功能是这样的

  {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>
    <td><button value={JSON.stringify(d)} onClick={(e)=>{
      decNum(e);
      }}>Book Now</button></td>
  </tr>

</table>
</div>
      )
})}

onclick函数是这样的

const decNum=(e)=>{
  var i =0
    cartData[i] = e.target.value
    i = i+1
    console.log(cartData)
    console.log( e.target.value)
  }

我得到了我点击的特定按钮的值，没有别的。而且我想获取之前点击过的所有数据。

提前致谢

供参考map函数中传入的数据是这样的

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"
  } 
  ]

【问题讨论】：

标签： javascript html jquery reactjs

【解决方案1】：

我认为您的数据结构作为键/值对更有意义

{datetime: numSeats}

向按钮元素添加一个数据属性以存储计数（以防您想直接访问它），然后填充您的对象。

const Cart = (props) => {
    const cartData = {}

    const decNum=(e)=>{
      let n = +e.target.dataset.count +1; // get the current number from the dataset, inc by 1
      cartData[e.target.value] = n; // assign the value to your obj
      e.target.dataset.count = n; // put the new value back into the dataset
    }

    .....

    {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>
        <td><button value={JSON.stringify(d)} 
              data-count='0' onClick={(e)=> { decNum(e); }}>
                 Book Now
             </button></td>
      </tr>
    
    </table>
    </div>
          )
    })}

【讨论】：

【解决方案2】：

{
 var i =0
    cartData[i] = e.target.value
    i = i+1
}

每次调用函数时都会执行carData[0] = 'abcd'。您的i 应该超出此功能的范围。您甚至可以执行carData.push(e.target.value) 之类的操作。这将是理想的，您也不会遇到参考错误。

所有这一切都假设，您的 carData 最初被定义为错误，并且不会在每次点击时自行重置。

【讨论】：