React 动态设置多个状态

Question

Im learning React and currently playing with passing data around.

I have info for 5 cards stored in state like this:

state = {
    cards: [
        { id: 1, name: "p1", value: "Prize 1", imageSrc: "/path/to/image", bgColor: { background: "#FF6384", border: "4px solid #FF6384" } },
        { id: 2, name: "p2", value: "Prize 2", imageSrc: "/path/to/image", bgColor: { background: "#4BC0C0", border: "4px solid #4BC0C0" } },
        { id: 3, name: "p3", value: "Prize 3", imageSrc: "/path/to/image", bgColor: { background: "#FFCE56", border: "4px solid #FFCE56" }},
        { id: 4, name: "p4", value: "Prize 4", imageSrc: "/path/to/image", bgColor: { background: "#67bd42", border: "4px solid #67bd42" } },
        { id: 5, name: "p5", value: "Prize 5", imageSrc: "/path/to/image", bgColor: { background: "#c931f7", border: "4px solid #c931f7" }}
    ],
    flipped: null,
   };

I am displaying them with an iteration, like this:

<div className="prize-cards-inner">
                {this.state.cards.map((card) => {
                    return (
                        <section key={card.id} className="prize-card-container">
                            <div
                                className={`prize-card ${
                                    this.state.flipped === card ? "flipped" : ""
                                    }`}
                                onClick={() => this.clickHandler(card)}
                            >
                                <div className="front">
                                    <div className="card-name-div" style={ card.bgColor }>
                                        {card.value}
                                    </div>
                                    <div className="prize-image-div" >
                                        <img className="prize-image"  src={card.imageSrc} alt="test" /> 
                                        
                                    </div>
                                    <div className="slot-name-div" style={card.bgColor}>
                                       <p> {card.name}</p>
                                    </div>
                                </div>
                                <div className="back">Prize</div>
                            </div>
                        </section>
                    );
                })}
                
            </div>

and handling card clicks with this:

    clickHandler = (card) => {
    if (this.state.flipped) {
        return;
    }
    this.setState({
        flipped: card,
        ***Set another state for all other cards (how do I say "set the state of all cards that aren't this card?")***
    });

};

I would like to set the state for all other cards aside from the clicked card at the same time I set the state for the clicked card. I have no clue how to do what I want, so I have marked the part I am unsure about with asterisks. Thanks in advance for your time.

Answer 1

I think you are looking for this:

const clickHandler = (card) => {
 if (this.state.flipped) {
   return;
 }

 this.setState((state) => ({
   flipped: card,
   cards: state.cards.map((c) => ({
     ...c, someOtherState: 'some value',
   }))
 });
};

I'd recommend you start using functional components with React hooks right away. They provide much nicer developer experience