React中变量使用问题：handleDeleteRow无法正确获取editRow值

问题出在React的状态更新是异步批量处理的——你调用setEditRow(row.original)后，editRow不会立刻变成新值，所以后续直接使用editRow时，拿到的还是更新前的旧值，这就导致confirm弹窗里的editRow.name可能为空或错误，后续的删除逻辑也会出问题。

最优解决方案：用临时变量替代即时状态依赖 #

既然你已经拿到了row.original，直接把它存到临时变量里，后续所有需要用到"编辑行"的地方都用这个变量，既满足你想通过"编辑行"逻辑处理的需求，又绕开了异步状态的坑：

const handleDeleteRow = async (row) => {
  // 先把目标行存为临时变量
  const targetRow = row.original;
  // 依然可以设置editRow状态（比如用于其他组件渲染）
  setEditRow(targetRow);
  
  // 直接用临时变量，能拿到正确值
  if (confirm(`Are you sure you want to delete ${targetRow.name}`)) {
    try {
      const res = await axios.delete(
        `${process.env.NEXT_PUBLIC_API_URL}/api/Airline/DeleteAsync`,
        { data: targetRow }
      );

      if (res.status === 200) {
        // 用函数式更新tableData，避免依赖旧状态
        setTableData(prevTableData => prevTableData.filter(item => item.id !== targetRow.id));
      }
    } catch (err) {
      console.log(err);
    }
  }
};

备选方案：通过useEffect监听状态变化（不推荐当前场景） #

如果一定要依赖editRow更新后的状态来执行删除逻辑，可以用useEffect监听editRow的变化，把删除逻辑移到effect里。但这种方式会让操作逻辑割裂，不太适合用户点击后即时删除的场景，仅作知识补充：

// 监听editRow变化，执行删除逻辑
useEffect(() => {
  const deleteTargetRow = async () => {
    if (!editRow) return;
    
    if (confirm(`Are you sure you want to delete ${editRow.name}`)) {
      try {
        const res = await axios.delete(
          `${process.env.NEXT_PUBLIC_API_URL}/api/Airline/DeleteAsync`,
          { data: editRow }
        );
        
        if (res.status === 200) {
          setTableData(prev => prev.filter(item => item.id !== editRow.id));
        }
      } catch (err) {
        console.log(err);
      }
    }
    // 执行完成后重置editRow，避免重复触发
    setEditRow(null);
  };

  if (editRow) deleteTargetRow();
}, [editRow]);

// 点击删除时仅设置editRow状态
const handleDeleteRow = (row) => {
  setEditRow(row.original);
};

核心原理说明 #

React的setState（包括useState的更新函数）是异步的，它会把状态更新加入队列，等待批量处理后再更新组件。所以不要在调用setState后立刻读取状态值，要么用临时变量暂存数据，要么用函数式更新获取最新状态，要么通过useEffect监听状态变化。

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