如何将 object 添加到另一个对象数组中的数组？

Question

在 reactJS。我创建了一个 Class Client 。 在这个 Class 中，我有一个名为PurchaseList的数组。 我尝试向该数组添加一个名为purchase的 object 数组。 但出于某种原因，我得到了Uncaught TypeError: clientList[currentClientIdx].purchaseList.push is not a function （我必须指定clientList是 App.js 组件中定义的 state ）

我怎样才能做到这一点？

这是我的代码：

//this is the Class:
class Client {
  purchaseList = [];
  constructor(id, username, password, moneyAmount) {
    this.id = id;
    this.username = username;
    this.password = password;
    this.moneyAmount = moneyAmount;
  }
}

这是将数据添加到PurchaseList的代码：

import React, { useState } from 'react'

export default function Action({clientList,currentClientIdx}) {
    
    const [company,setCompany]=useState()
    const [amount,setAmount]=useState()
    const [purchase,setPurchase]=useState()
     
    
    const handlePurchase=()=>{
     
      setPurchase({company:company,amount:amount})
      console.log(purchase);  
      clientList[currentClientIdx].purchaseList.push(purchase)
      console.log(clientList[currentClientIdx]); 
    }

return (
    <div>
        
        <input type="text" placeholder='Company'  onChange={(e)=>setCompany(e.target.value)}/>
        <input type="number" placeholder='Amount' onChange={(e)=>setAmount(e.target.value)} />
        
        <button onClick={()=>handlePurchase()}>Purchase</button>
    </div>
  )
}

Answer 1

确保purchaseList是一个数组。

在调用push之前，您必须将purchaseList初始化为一个空数组。 此外，您应该检查它是否已经是一个数组，这样您就不会覆盖值：

if (Array.isArray(clientList[currentClientIdx].purchaseList)) {
  // Array already exists, push to end of array
  clientList[currentClientIdx].purchaseList.push(purchase);
} else {
  // Array does not exist, create array and push element
  clientList[currentClientIdx].purchaseList = [];
  clientList[currentClientIdx].purchaseList.push(purchase);
}