React中checkbox状态更新延迟导致选中值及总价计算异常问题

问题根源 #

你遇到的所有状态更新滞后、总价计算不匹配的问题，本质都是 React 中 useState 返回的状态更新函数是异步批量执行的特性导致的：调用 setLibrosID 之后，当前作用域内的 LibrosID 还是更新前的旧值，你直接用旧值计算总价、打印日志自然会出现滞后的情况。

现有代码的具体问题 #

• 单个勾选逻辑中，你刚调用 setLibrosID([...LibrosID, data]) 就用旧的 LibrosID 遍历计算总价，刚选中的条目自然不会被计入
• 全选/取消全选逻辑中存在冗余的循环赋值操作，反复调用 setTPLibrosNuevos 完全没有必要
• 末尾的 console.log(LibrosID) 打印的永远是更新前的旧值，无法用来判断状态是否更新成功

修复方案 #

这里提供两种可行方案，优先推荐第二种，减少冗余状态维护：

方案1：直接修改现有handleChange逻辑，用新构造的状态值计算总价 #

const handleChange = (e, data) => {
  const { name, checked } = e.target;
  let newLibrosID = [];
  if (checked) {
    if (name === "allSelect") {
      newLibrosID = [...librosNuevos];
    } else {
      newLibrosID = [...LibrosID, data];
    }
  } else {
    if (name === "allSelect") {
      newLibrosID = [];
    } else {
      newLibrosID = LibrosID.filter((item) => item.id !== data.id);
    }
  }
  // 更新选中列表
  setLibrosID(newLibrosID);
  // 用新的选中列表计算总价
  const total = newLibrosID.reduce((sum, item) => sum + Number(item.precio), 0);
  setTPLibrosNuevos(parseFloat(total).toFixed(2));
};

方案2（推荐）：将总价改为派生状态，不需要单独维护state #

总价完全可以由选中的条目列表计算得到，不需要单独用 useState 存储，从根源避免状态不同步的问题：

1. 删掉原来的 TPLibrosNuevos 相关的 useState 定义，改为用 useMemo 计算：

import { useMemo } from 'react';

// 原来的两个state保留
const [librosNuevos, setLibrosNuevos] = useState([]);
const [LibrosID, setLibrosID] = useState([]);
// 总价直接用useMemo派生
const TPLibrosNuevos = useMemo(() => {
  const total = LibrosID.reduce((sum, item) => sum + Number(item.precio), 0);
  return parseFloat(total).toFixed(2);
}, [LibrosID]);

2. 简化handleChange逻辑，只需要更新选中列表即可：

const handleChange = (e, data) => {
  const { name, checked } = e.target;
  if (checked) {
    if (name === "allSelect") {
      setLibrosID([...librosNuevos]);
    } else {
      // 用函数式更新避免并发更新导致的状态丢失
      setLibrosID(prev => [...prev, data]);
    }
  } else {
    if (name === "allSelect") {
      setLibrosID([]);
    } else {
      setLibrosID(prev => prev.filter(item => item.id !== data.id));
    }
  }
};

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