如何更改数组中对象的值？

Question

我有一个数组对象，我想改变元素的值。

  const cardObj = [
    {
      id: randomNum(),
      cardName: "My Best Buy",
      totalCreditLine: 1000,
      currentBalance: 400,
      monthlyPayment: 100,
      dueBy: "2022-4-18"
    },
    {
      id: randomNum(),
      cardName: "Amazon",
      totalCreditLine: 2000,
      currentBalance: 1200,
      monthlyPayment: 200,
      dueBy: "2022-4-10"
    },
    {
      id: randomNum(),
      cardName: "Home Depot",
      totalCreditLine: 1500,
      currentBalance: 800,
      monthlyPayment: 300,
      dueBy: "2022-4-15"
    },
    {
      id: randomNum(),
      cardName: "Ebay",
      totalCreditLine: 500,
      currentBalance: 300,
      monthlyPayment: 100,
      dueBy: "2022-3-30"
    }
   
  ];

 const [cards, setCard] = useState([...cardObj]);

我试过了，但没有用：

  const updateDue = (card) => {
  
    cards.map((element) =>{
      if(card != undefined){
        if(element.id === card.id){
          setCard({...cards, element, cardName: 'hello' })
        }
      }
    })
    
  };

我需要帮助的代码是: setCard({...cards，元素，cardName：'hello‘})

如果元素id ===卡id将元素cardName更改为“hello”

Answer 1

您需要更改整个数组，然后设置值。

const updateDue = (card) => {
  if (card) {
    const updatedCard = cards.map(element => {
      if (card.id === element.id) {
        return {
          ...card,
          cardName: 'hello'
        }
      } else {
        return { ...card
        }
      }
    })
    setCard(updatedCard)
  }
}