如何在我的反应应用程序中将对象添加到数组

Question

我正在学习 React 并尝试创建一个记忆游戏应用程序，在我的应用程序的卡片组件中，如果我点击一张卡片，我想将该卡片推送到一个空数组。但是如果我单击第二张卡片，数组不会保存第一张卡片，或者它不会正确保存，因为每次单击新卡片时道具的值都会改变。我检查了一些类似的问题，但他们发布的问题不同。

import React from 'react';
import '../memoryGameStyle/card.css';

class Card extends React.Component{
    constructor(props){
        super(props);
        this.state={card:'' }
    }
    onCardClick=()=>{
        const array=[]
        const newCard={...this.props.card,show:true}
        this.setState({card:newCard})
    }
    render(){...}
}

export default Card

我正在尝试将新卡推送到 onCardClick 中的阵列。我有两个道具，一个会显示我点击的卡片，另一个会显示所有卡片的数组。我尝试使用 filter()、push()、spread 运算符，到目前为止都不起作用，我一定做错了什么。请帮忙，谢谢

Answer 1

你在你的状态下写完了 card 变量。改为这样做

 constructor(props){
    super(props);
    this.state={card:[] }
}

免责声明：以下解决方案假定 newCard 包含所选卡片

onCardClick=()=>{
    const {card} =this.state;
    const newCard= //get selected card
    card.push(newCard);
    this.setState({card:newCard})
}

Answer 2

据我了解，您有两个要求：

• 显示当前点击的卡片。
• 显示用户过去点击过的所有卡片。 //Let me know if that's not the case

假设您想要做以上 2 件事，您可以执行以下操作：

state = {
  cards: [],
  showAllClickedCards: true 
}
//"cards" holds the cards clicked by the user
//The most recent clicked card will be at the last in the the array.
//You can toggle "showAllClickedCards" to either show all cards or selected one 

现在你可以在 onCardClick 中进行操作

//Assuming the function is being passed the selectedCard
onCardClick = (selectedCard) => {
     //Do something with selected card
     this.setState(prevState => ({
        cards: [...prevState.cards, selectedCard]
     }))
} 

注意：要显示当前点击的卡片，您可以使用this.state.cards[this.state.cards.length - 1]。
希望这会有所帮助