React Hooks中如何正确修改对象数组元素的属性值

原有写法的问题 #

你在Array.map()遍历内部反复调用setState的写法是错误的，核心问题有两个：

• React默认会对短时间内触发的多次setState做批处理，循环内多次调用setState不仅会触发不必要的重复渲染，还可能出现后续更新覆盖前面修改结果的问题，最终无法得到正确的全量更新数组
• setState回调拿到的prevState是整个Data[]数组，你直接给数组对象本身添加percentage属性属于类型错误，根本不会修改到数组内每个子对象的对应字段

正确实现逻辑 #

数组类型的state更新要遵循一个原则：先通过遍历生成完整的修改后新数组，再一次性调用setState提交更新，绝对不要在遍历循环内部调用setState。

针对你给出的结构，percentage为单项value占总value的百分比，完整实现代码如下：

// 该方法可以绑定在事件回调、或者放在useEffect等副作用里执行
const calculatePercentage = () => {
  setData(prevData => {
    // 先计算所有项的value总和
    const totalValue = prevData.reduce((sum, currentItem) => sum + currentItem.value, 0);
    // 遍历原数组，返回修改完成的新数组
    return prevData.map(item => ({
      ...item, // 展开原对象属性，避免丢失state、value字段
      percentage: Number(((item.value / totalValue) * 100).toFixed(2)) // 计算百分比，保留2位小数，精度可按需调整
    }))
  })
}

扩展场景 #

如果不需要全量修改，只想更新符合特定条件的项，只需要在map内加判断即可，不需要修改的项直接返回原对象：

setData(prevData => prevData.map(item => {
  // 例：仅修改state为'RJ'的项的percentage为30
  if (item.state === 'RJ') {
    return { ...item, percentage: 30 }
  }
  return item
}))

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