React使用Reduce统计输入值总和出现字符串拼接问题求助

• 所有HTML input元素的event.target.value默认返回值都是字符串类型，哪怕你给输入框设置了type="number"也是如此。你直接将字符串类型的nilai存入mahasiswa数组，reduce求和时初始值0（数字）和字符串相加，会自动把数字转成字符串执行拼接逻辑，所以得到的是拼接后的字符串而非算术和。
• 你当前的setValueState逻辑存在额外bug：所有输入框的修改事件都会触发该方法，不管是时间、描述还是金额输入，都会往nilaiArray里塞值，不符合你的业务需求。
• 另外你直接对state中的数组执行push操作属于直接修改原state，不符合React immutable的设计原则，容易出现渲染异常。

步骤1：优化输入赋值逻辑 #

修改setValueState方法，区分处理不同字段，仅对金额字段做数值转换，避免无关输入修改金额数组：

setValueState(event){ 
  const {name, value} = event.target
  if(name === 'nilai'){
    // 金额字段转数值后再处理
    const numValue = value ? parseFloat(value) : 0
    this.setState({ 
      [name] : numValue
    }) 
    // 生成新数组赋值，不修改原state
    const nilaiArrayTmp = [...this.state.nilaiArray, numValue]
    this.setState({
      nilaiArray: nilaiArrayTmp
    })
  } else {
    // 普通文本字段直接存字符串
    this.setState({ 
      [name] : value
    }) 
  }
}

步骤2：优化数据存入逻辑 #

修改addData方法，用新数组赋值代替直接修改原state数组：

addData(){ 
  // 生成新数组赋值，触发正确的state更新
  const data_tmp = [...this.state.mahasiswa, {
    nim : this.state.tgl, 
    nama : this.state.nama, 
    nilai : this.state.nilai
  }]
  this.setState({ 
    mahasiswa : data_tmp 
  }) 
}

步骤3：修复求和逻辑 #

reduce求和时已经是数值类型，最后统一格式化保留两位小数即可：

const total = this.state.mahasiswa.reduce((sum, {nilai}) => sum + nilai , 0 ).toFixed(2)

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