React骰子组件for循环no-unused-expression报错修复后功能失效

问题1：第41行no-unused-expressions报错 #

原因 #

Array.push()方法的返回值是push操作后数组的最新长度，你在rolls.push(Math.ceil(Math.random() * 8))后加了* i，这个乘法运算的结果没有赋值给任何变量，也没有作为函数返回值，属于无意义的无效表达式，触发了ESLint校验规则。

修复 #

直接删除多余的* i，修改第41行代码为：

rolls.push(Math.ceil(Math.random() * 8));

问题2：点击按钮无法进入if条件分支 #

原因 #

React的onClick事件触发时，会默认给绑定的回调函数传入**事件对象（Event）**作为第一个参数。你没有给rollDie手动传参，所以函数的bonus形参实际接收的是事件对象，不是你预想的undefined，!bonus判断结果为false，自然无法进入条件分支。

修复 #

二选一即可：

• 方案1：修改按钮的onClick绑定逻辑，用箭头函数包裹rollDie调用，不传递参数：

<button className="Dice-btn" onClick={() => this.rollDie()}>
  <img className="Dice-img" src={img} alt="Dice icon" />
</button>

• 方案2：给rollDie设置形参默认值，避免无传参时接收意外值：

rollDie(bonus = 0, penalty = 0) {
  // 原有逻辑不变
}

补充优化 #

为了避免后续修改循环逻辑时出现空数组调用reduce的报错，建议给reduce方法添加初始值：

this.setState({totalRoll: rolls.reduce(reducer, 0)});

你原来的setState用法是正确的，修复上述问题后就可以正常实现点击按钮更新总点数的需求。

内容的提问来源于stack exchange，提问作者Jos O'shea