ReactJS中如何更新由对象数组构成的state并修改指定字段？

现有代码问题 #

• switch 语法错误：case "day" || "days" 的写法无法同时匹配单复数单位，只会命中第一个值 "day"
• 拆分后得到的是字符串数组，未提取数值项转换为数字类型，直接做乘法运算会得到 NaN
• 遍历过程中没有生成新的数组对象，也没有调用 state 的更新方法 setCompetitorData，修改无法触发视图更新
• useEffect 依赖项为空，若后续 competitorsData 发生变更，不会重新执行转换逻辑

正确实现代码 #

首先修改 useEffect 内的转换逻辑，生成新数组后调用更新方法回写 state：

useEffect(() => {
  const processedData = competitorsData.map(item => {
    // 拆分数值和单位，转换数值为数字类型
    const [countStr, unit] = item.speed.split(" ");
    const count = Number(countStr);
    let speedHours = 0;

    switch(unit) {
      case "day":
      case "days":
        speedHours = count * 24;
        break;
      case "week":
      case "weeks":
        speedHours = count * 168;
        break;
      case "month":
      case "months":
        speedHours = count * 730;
        break;
      default:
        speedHours = 0;
    }

    // 返回新对象，不修改原state引用，这里可以选择新增字段或者替换原speed字段
    return {
      ...item,
      // 新增字段存储小时值，保留原speed字段
      speedInHours: speedHours
      // 如果需要直接替换原speed字段，替换为下行代码
      // speed: `${speedHours} hours`
    }
  })
  // 回写更新state
  setCompetitorData(processedData);
}, [competitorsData])

如果新增了speedInHours字段，渲染表格时修改对应单元格的取值即可：

<tr key={info.name}>
  <td>{info.name}</td>
  <td>{info.speedInHours} 小时</td>
  <td>{info.color}</td>
</tr>

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