React中如何对map返回的投票数值求和？解决字符串拼接问题

嘿，我懂你遇到的这个坑——这大概率是因为你的item.votes是字符串类型而非数字类型，直接循环相加时触发了字符串拼接，才会得到5000这种奇怪的结果。下面给你几个实用的解决办法：

方法1：用reduce快速求和（最推荐） #

Array.reduce()是处理数组求和的绝佳工具，还能顺便把字符串转成数字，一步到位：

getTotalUserVotes = (userid) => { 
  let posts = this.state.posts.slice(); 
  let current = posts.filter(item => item.userid === userid); 
  console.log(current); 
  // 直接在reduce里完成转数字+求和
  const totalVotes = current.reduce((sum, item) => {
    return sum + Number(item.votes);
  }, 0); // 初始值设为0，确保是数值类型
  return <div>votes: {totalVotes}</div>; 
}

方法2：修改for循环，手动转数字 #

如果你更习惯用for循环，只需要把每个投票数转成数字再相加就行：

getTotalUserVotes = (userid) => { 
  let posts = this.state.posts.slice(); 
  let current = posts.filter(item => item.userid === userid); 
  console.log(current); 
  const tot = current.map(item => item.votes); 
  console.log("tot is " + tot); 
  
  let totalVotes = 0;
  for (let vote of tot) {
    // 用Number()、parseInt()或者parseFloat()转成数字都可以
    totalVotes += Number(vote);
  }
  
  return <div>votes: {totalVotes}</div>; 
}

方法3：先把所有投票数转成数字再处理 #

也可以在map阶段就把字符串转成数字，这样后续的求和操作就不会踩坑：

getTotalUserVotes = (userid) => { 
  let posts = this.state.posts.slice(); 
  let current = posts.filter(item => item.userid === userid); 
  console.log(current); 
  // map的时候直接转成数字
  const tot = current.map(item => Number(item.votes)); 
  console.log("tot is " + tot); 
  
  // 现在用循环或者reduce都能正常求和了
  const totalVotes = tot.reduce((sum, vote) => sum + vote, 0);
  
  return <div>votes: {totalVotes}</div>; 
}

问题根源说明 #

当item.votes是字符串（比如从后端接口返回的是字符串格式的数字，或者在state里存储时没转成数字），JavaScript的+运算符会优先执行字符串拼接而非数值加法。比如0 + "50"会得到"50"，接着"50" + "0"得到"500"，最后"500" + "0"就变成了"5000"。只要把每个值转成数字，就能触发正常的数值加法啦。

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