web-dev-qa-db-fra.com

Comment changer plusieurs propriétés d'un état en réaction (en même temps)?

J'ai cet état dans mon composant parent principal:

this.state = {
    playableCards: [],
    openedCard: null,
    offeredChips: 0,
    activePlayer: 0, // first player is 0, second player is 1
    players: [
        {
            name: "player1",
            remainingChips: 11,
            cards: [],
            score: null
        },
        {
            name: "player2",
            remainingChips: 11,
            cards: [],
            score: null
        }
    ]
};

Maintenant, j'ai quelques méthodes qui changent différentes propriétés de l'état. Par exemple.:

takeCard = () => {
    const {
        activePlayer,
        players,
        playableCards,
        offeredChips,
        openedCard
    } = this.state;

    if(openedCard) {

        // Add card to active player
        let playersClone = [...players];
        playersClone[activePlayer].cards = [
            ...playersClone[activePlayer].cards,
            openedCard
        ];

        // Add any offered chips to active player
        playersClone[activePlayer].remainingChips += offeredChips;

        this.setState({ players: playersClone }, () =>
            this.calculateScore(activePlayer)
        );

        // Remove card from deck
        this.setState({
            playableCards: playableCards.filter(function(card) {
                return card !== openedCard;
            })
        });

        // Change active player
        const nextPlayer = activePlayer === 0 ? 1 : 0;
        this.setState({ activePlayer: nextPlayer });

        // Reset offered chips to 0
        this.setState({ offeredChips: 0 });

        // Reset opened card
        this.setState({ openedCard: null });

    } else {
        console.log("Open a card first!");
    }

};

Comme vous pouvez le voir, de nombreuses propriétés sont modifiées uniquement par un seul événement de clic (cette méthode est attachée à un événement de clic). Je me demande si c'est la bonne façon de le faire ou dois-je combiner toutes les setState()?

reactjsstatesetstate
4
catandmouse

Il est normal d'appeler plusieurs setStates depuis React fait en interne le traitement par lots avant setState et n'appellera donc qu'une seule fois render. Cela dit, vous risquez de faire une erreur en écrivant setState de telle sorte que le traitement par lots ignore une modification ou définit une valeur incorrecte élevée (par exemple, vous pouvez appeler setState deux fois pour la même clé en fonction de la valeur précédente et vous pouvez vous attendre à un résultat différent de celui que vous obtenez). Il est donc recommandé d'appeler setState une fois après avoir tout traité les valeurs

    // Add card to active player
    let playersClone = [...players];
    playersClone[activePlayer].cards = [
        ...playersClone[activePlayer].cards,
        openedCard
    ];

    // Add any offered chips to active player
    playersClone[activePlayer].remainingChips += offeredChips;

    const playableCards = playableCards.filter(function(card) {
            return card !== openedCard;
    })


    // Change active player
    const nextPlayer = activePlayer === 0 ? 1 : 0;

    // Reset offered chips to 0
    // Reset opened card
    // Remove card from deck
    this.setState({ 
          openedCard: null,
          offeredChips: 0, 
          playableCards, 
          players: playersClone
    }, () =>
        this.calculateScore(activePlayer)
    );
7
Shubham Khatri

vous pouvez modifier plusieurs propriétés d'un état comme celui-ci.

this.setState({ openedCard: null, offeredChips: 0, activePlayer: nextPlayer });
4
Roopak PutheVeettil