React中函数onClick时生效，其他方法调用却无效的问题

看起来你遇到的问题是：random()函数里的this.setState()在按钮点击时正常工作，但在isCorrect()里调用时要么没触发，要么没生效。咱们一步步拆解问题：

首先排查最可能的原因：isCorrect()里的return导致random()根本没被调用 #

看你的isCorrect代码：

isCorrect = (newOrder) => { 
  for (let i = 0 ; i < newOrder.length; i ++) { 
    if( this.state.displayPlayers[newOrder[i]].rank !== i) { 
      console.log('loser') 
      return  // 这里直接返回了！后面的代码都不会执行
    } 
  } 
  console.log('winner') 
  this.random(); 
}

一旦循环中发现任何一个元素的rank和索引不匹配，函数会立刻return，导致后面的console.log('winner')和this.random()完全不会执行。你可能误以为random()被调用了，但实际上只有当所有元素都匹配时，它才会被触发。

验证方法 #

在this.random()前面加一行日志：

console.log('准备调用random函数')
this.random();

如果控制台没输出这句话，说明isCorrect()根本没走到这一步，问题出在提前return上。

如果确认random()确实被调用了，但setState没生效 #

因为你用了箭头函数定义random，this的指向应该是正确的（绑定到组件实例），那可能是setState的异步特性导致你误以为没生效：

• React的setState是异步更新的，如果你在调用random()后立刻去读取this.state.order，拿到的还是旧值。
• 可以通过setState的回调函数来确认更新是否成功：

  random = () => { 
    this.setState({ order: [4, 3, 2, 1, 0] }, () => {
      console.log('状态更新完成，新的order值：', this.state.order)
    }); 
  };
  

  如果回调里能输出正确的数组，说明setState其实已经生效了，只是你读取状态的时机不对。

额外建议：优化代码逻辑 #

如果你希望不管对错都调用random()，可以把this.random()移到循环外面，比如：

isCorrect = (newOrder) => { 
  let isWinner = true;
  for (let i = 0 ; i < newOrder.length; i ++) { 
    if( this.state.displayPlayers[newOrder[i]].rank !== i) { 
      console.log('loser') 
      isWinner = false;
      break;  // 不用return，跳出循环即可
    } 
  } 
  if (isWinner) {
    console.log('winner') 
  }
  this.random();  // 不管输赢都执行
}

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