我的主要父组件中有这种状态:
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
}
]
};
现在,我有一些方法可以更改状态的不同属性。例如:
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!");
}
};
正如您所看到的,有许多属性只需通过单击事件即可更改(此方法附加到单击事件)。我想知道这是否是正确的方法,还是应该结合所有 setState()
?
最佳答案
可以调用多个 setState,因为 React 内部会在 setState 之前进行批处理,因此只会调用 render
一次。也就是说,您在编写 setState 时犯错误的可能性很高,例如批处理会忽略更改或设置不正确的值(例如,您可能会根据先前的值对同一键调用 setState 两次,并且可能会期望得到与实际结果不同的结果)你得到)。因此建议您在处理完所有值后调用一次 setState
// 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)
);
关于reactjs - 如何(同时)更改 react 中状态的多个属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52847245/