React说唱答题应用中使用setState递增分数功能失效问题求助

嘿，我一眼就揪出问题所在啦！你遇到的分数始终显示2分的情况，根源出在setState回调里使用的curr.score++运算符上。

问题原因 #

curr.score++是后置递增运算符，它的执行逻辑是：先返回当前curr.score的原始值，再将curr.score加1。但在setState的回调函数中，我们需要返回的是新的状态值，这就导致你每次调用setState时，其实都是把当前分数原封不动地赋值回去，根本没有实现真正的递增！比如如果你的初始分数设为2，不管答对多少题，状态里的分数都会一直停留在2。

修复方案 #

方案1：修正递增逻辑 #

把每个setState回调里的curr.score++改成curr.score + 1，这样每次答对题目都会返回当前分数加1的新值，状态就能正确更新了。修改后的代码如下：

if(this.state.question1 === '1996') { 
  this.setState((curr)=>{ 
    return {score: curr.score + 1} 
  }) 
} 
if(this.state.question2 === 'NWA') { 
  this.setState((curr)=>{ 
    return {score: curr.score + 1} 
  }) 
} 
if(this.state.question3 === 'bad-boy') { 
  this.setState((curr)=>{ 
    return {score: curr.score + 1} 
  }) 
} 
if(this.state.question4 === 'big-l') { 
  this.setState((curr)=>{ 
    return {score: curr.score + 1} 
  }) 
} 
if(this.state.question5 === 'snoop-dogg') { 
  this.setState((curr)=>{ 
    return {score: curr.score + 1} 
  }) 
}

// 注意：setState是异步的，要查看更新后的状态需放在回调里
this.setState(() => {}, () => {
  console.log(this.state);
});
console.log('calculating');

方案2：优化为一次性状态更新（更推荐） #

目前你每答对一题就调用一次setState，虽然React会自动合并多次状态更新，但更高效的方式是先计算总加分，再一次性更新状态。这样代码更简洁，也能减少不必要的状态更新次数：

calculateScore = () => {
  let totalAdd = 0;

  // 统计答对的题目数量
  if(this.state.question1 === '1996') totalAdd++;
  if(this.state.question2 === 'NWA') totalAdd++;
  if(this.state.question3 === 'bad-boy') totalAdd++;
  if(this.state.question4 === 'big-l') totalAdd++;
  if(this.state.question5 === 'snoop-dogg') totalAdd++;

  // 一次性更新分数
  this.setState((curr) => ({
    score: curr.score + totalAdd
  }), () => {
    // 在回调里打印更新后的状态，因为setState是异步的
    console.log(this.state);
    console.log('calculating');
  });
}

额外提醒 #

setState是异步操作，你之前直接在setState之后调用console.log(this.state)，打印的其实是更新前的旧状态。如果需要查看更新后的分数，一定要把console.log放在setState的第二个回调参数里，或者放在回调函数内部哦。

内容的提问来源于stack exchange，提问作者Brixsta