React Native数据库删行时更新前端及Django makemigrations报错求助

核心实现方案 #

通过状态管理+数据库操作回调，在删除操作完成后立即更新前端状态，触发界面重渲染。

步骤1：用状态存储数据列表 #

使用React Native的useState钩子维护数据列表状态，初始化时从数据库拉取数据：

import { useState, useEffect } from 'react';
import { View, Text, FlatList, Button } from 'react-native';
import { deleteData, fetchData } from './dbUtils'; // 自定义数据库操作工具

const DataScreen = () => {
  const [dataList, setDataList] = useState([]);

  // 页面加载时初始化数据
  useEffect(() => {
    loadLatestData();
  }, []);

  const loadLatestData = async () => {
    const data = await fetchData();
    setDataList(data);
  };

步骤2：实现删除+状态同步 #

删除操作完成后，要么重新拉取数据库数据，要么直接从当前状态中移除对应项：

const handleDelete = async (itemId) => {
    // 执行数据库删除
    await deleteData(itemId);
    
    // 方案一：重新拉取全部数据（简单可靠，适合数据量小的场景）
    loadLatestData();
    
    // 方案二：直接从状态中删除对应项（减少数据库请求，需确保删除操作成功）
    // setDataList(prev => prev.filter(item => item.id !== itemId));
  };

步骤3：渲染列表并绑定删除事件 #

用FlatList渲染数据，给每个列表项添加删除按钮：

return (
    <View style={{ padding: 16 }}>
      <FlatList
        data={dataList}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
            <Text>{item.content}</Text>
            <Button title="删除" onPress={() => handleDelete(item.id)} />
          </View>
        )}
      />
    </View>
  );
};

export default DataScreen;

示例数据库工具函数（以SQLite为例） #

如果使用react-native-sqlite-storage，dbUtils.js可以这样写：

import SQLite from 'react-native-sqlite-storage';

const db = SQLite.openDatabase({ name: 'myDb.db' });

// 初始化表（仅首次执行）
db.transaction(tx => {
  tx.executeSql(
    'CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY AUTOINCREMENT, content TEXT)'
  );
});

// 获取全部数据
export const fetchData = () => {
  return new Promise((resolve) => {
    db.transaction(tx => {
      tx.executeSql('SELECT * FROM items', [], (_, { rows }) => {
        resolve(rows.raw());
      });
    });
  });
};

// 删除指定ID的数据
export const deleteData = (id) => {
  return new Promise((resolve) => {
    db.transaction(tx => {
      tx.executeSql('DELETE FROM items WHERE id = ?', [id], () => {
        resolve();
      });
    });
  });
};

常见原因及修复步骤 #

• 未将APP加入INSTALLED_APPS
  打开项目根目录的settings.py，确认你的APP名称在INSTALLED_APPS列表中：

  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'your_app_name',  # 必须添加此行
  ]
  

• models.py语法错误
  检查models.py中的模型定义，确保字段语法正确、括号配对、无遗漏符号。示例正确模型：

  from django.db import models
  
  class Todo(models.Model):
      title = models.CharField(max_length=200)
      completed = models.BooleanField(default=False)
  

• 数据库配置错误
  查看settings.py的DATABASES配置，确保路径或连接信息正确。SQLite默认配置示例：

  DATABASES = {
      'default': {
          'ENGINE': 'django.db.backends.sqlite3',
          'NAME': BASE_DIR / 'db.sqlite3',
      }
  }
  

• 清理错误迁移文件
  如果之前生成过无效迁移，删除APP下migrations文件夹中除__init__.py外的所有文件，然后重新执行：

  python .\manage.py makemigrations
  python .\manage.py migrate
  

• 版本兼容性问题
  确认Python版本与Django版本兼容（如Django 4.x要求Python 3.8+），执行以下命令查看版本：

  python --version
  pip show django
  

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