React组件中reduce计算endX首次为0后续出现NaN问题求助

咱们直接来看问题所在：你的reduce累加逻辑写错了，这才导致后续计算出现NaN。

问题根源 #

你当前的reduce代码是：

let endX = this.state.widgets.reduce((endX, w) => endX.w + w.w, 0)

这里你给reduce传了初始值0，意味着第一次执行回调时，endX是数字0，而非widget对象。数字没有w属性，所以endX.w会返回undefined，undefined和w.w相加的结果就是NaN——一旦出现NaN，后续所有基于它的计算都会保持NaN状态。

修正方案 #

把reduce的累加逻辑改成直接累加宽度数值，去掉对不存在属性的访问：

addWidget = (index) => { 
  // 累加所有已存在widget的宽度总和
  let endX = this.state.widgets.reduce((totalWidth, widget) => totalWidth + widget.w, 0) 
  console.log(endX); 
  if (endX === 12) endX = 0 
  this.setState({ 
    widgets: this.state.widgets.concat({ 
      ...this.state.availableWidgets[index], 
      i: uuid(), 
      x: endX, 
      y: Infinity, 
    }) 
  }) 
}

为什么这样能解决问题 #

• 初始值0是数字类型，回调里的totalWidth始终是累加后的宽度总和（数字）
• 每次循环只需要把当前widget的w属性值加到totalWidth上即可
• 当widgets为空数组时，reduce直接返回初始值0，符合你的预期；当有widget时，会正确累加所有宽度

我还给变量和参数改了更语义化的名字（totalWidth、widget），这样能更直观地理解代码逻辑，减少类似的错误~

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