reactjs - 如何在反应中(同时)更改状态的多个属性?
问题描述
我的主要父组件中有这种状态:
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)
);
推荐阅读
- java - Recycler View 不能与 ImageView 一起使用,但可以与 ImageView+TextView 一起使用
- php - Symfony 4 使用 Composer 时内存不足
- java - 如何修复微笑神经网络以进行回归,它总是输出相同的预测
- angular - 由于令牌不再存储在 localStorage 中,如何在重新加载时在我的 Angular 应用程序中保留 Auth0 访问令牌?
- c++ - 在向量中交换不同的大小范围
- shopify - 在 Shopify Liquid 语言中获取产品重量
- c# - 使用 Parallel.ForEach 并行创建多个请求并将它们放在列表中
- django - 如何让静态 CSS 文件在 Django 上访问其他文件,例如 .eot、.ttf、.woff 等
- ruby-on-rails - 测试指向自身的模型 rspec rails 5
- javascript - NodeJS - 是否可以有两个单独的集群?