React Native SQLite 增删功能异常：训练组添加/删除无效，数据显示与保存不符合预期

兄弟，我瞅了下你贴的训练记录APP代码，发现几个关键问题导致训练组（set）增删无效、数据保存不生效，帮你一一拆解修复：

1. 最致命的问题：addSet 函数代码直接写断了 #

你贴的Workout组件里的addSet函数只写到const result = await就没了，这函数根本跑不起来，点击添加按钮当然没反应！先补全完整的添加逻辑：

async function addSet() {
  await ensureNameColumnExists();
  try {
    if (!name || name.trim() === "") {
      console.log("Greška: Ime ne može biti prazno.");
      return;
    }
    const dbConn = await initDB();
    // 插入新的训练组，和现有组保持相同的dayId、name、userId，初始字段留空
    const result = await dbConn.runAsync(
      `INSERT INTO workouts (dayId, name, userId, reps, load, rpe) VALUES (?, ?, ?, '', '', '')`,
      [dayId, name.trim(), userId]
    );
    // 插入后立刻刷新训练组列表，更新UI
    const updatedSets = await dbConn.getAllAsync(
      `SELECT * FROM workouts WHERE dayId = ? AND name = ? ORDER BY id ASC`,
      [dayId, name.trim()]
    );
    setSets(updatedSets);
    console.log(`Uspješno dodan set ID: ${result.lastInsertRowid}`);
  } catch (e) {
    console.log("Greška kod dodavanja seta:", e);
  }
}

2. Selector 组件更新字段时的作用域错误 #

你的Selector里的updateField函数用了String(result[field])来判断值是否变化，但result是fetchData内部的变量，这里根本访问不到，直接报错导致更新逻辑完全失效！改成用组件自身的状态值对比：

const updateField = async (field, value) => {
  // 从组件当前状态里取对应字段的现有值
  const currentValue = {
    reps: reps,
    load: load,
    rpe: rpe
  }[field];
  
  // 空值或者值没变化就直接返回
  if (value === '' || value === currentValue) return; 
  try {
    const dbConn = await initDB();
    await dbConn.runAsync(
      `UPDATE workouts SET ${field} = ? WHERE id = ?`,
      [value, id]
    );
  } catch (e) {
    console.log(`Greška kod spremanja polja ${field}:`, e);
  }
};

3. 删除功能的逻辑缺失与状态刷新 #

你说删除无效，主要是因为没有实现完整的删除逻辑，也没在删除后刷新训练组列表：

第一步：在Workout组件里写删除单个训练组的函数 #

const deleteSet = async (setId) => {
  try {
    const dbConn = await initDB();
    await dbConn.runAsync(
      `DELETE FROM workouts WHERE id = ?`,
      [setId]
    );
    // 删除后立刻刷新列表，更新UI
    const updatedSets = await dbConn.getAllAsync(
      `SELECT * FROM workouts WHERE dayId = ? AND name = ? ORDER BY id ASC`,
      [dayId, name.trim()]
    );
    setSets(updatedSets);
  } catch (e) {
    console.log("Greška kod brisanja seta:", e);
  }
};

第二步：给Selector传入这个删除函数 #

把渲染Selector时的onDelete改成我们刚写的deleteSet：

// 假设你在Workout里是这么渲染Selector的
{sets.map((set, index) => (
  <Selector
    key={set.id}
    id={set.id}
    setNum={index + 1}
    userId={userId}
    dayId={dayId}
    onDelete={deleteSet} // 传入删除函数
  />
))}

4. 额外的细节优化 #

• 所有SQL操作后记得手动刷新sets状态：不管是增、删、改，执行完SQL后都要重新查询数据库并调用setSets，这样UI才会同步更新
• 调试时多打印日志：比如在addSet里打印插入的新ID，deleteSet里打印删除的ID，方便定位问题
• 检查SQLite表结构：确保workouts表的id是自增主键，dayId、userId、name等字段都正确创建

内容来源于stack exchange