Expo SQLite点击按钮报TypeError: Unable to delete property问题排查

错误原因 #

• 按钮点击事件传参错误：Button组件的onPress触发时会默认将React合成事件对象作为参数传入addData方法，你的addData方法预期接收客户名称字符串，实际拿到的是事件对象，直接将事件对象作为参数传给了SQL插入语句。React会复用销毁合成事件，SQLite底层处理这个对象时触发TypeError: Unable to delete property报错和合成事件复用警告，事件对象序列化后体积过大同时触发PayloadTooLargeError。
• 缺少依赖导入：代码中使用了Platform.OS判断运行环境，但没有从react-native包中导入Platform。
• （可选）未定义方法调用：TextInput的onBlur回调中调用了setFieldTouched，如果没有集成Formik相关逻辑，该方法不存在会额外触发报错。

修复方案 #

1. 修改按钮的onPress绑定逻辑，主动传入state中存储的客户名称：

<Button
  color="blue"
  title="保存"
  onPress={() => this.addData(this.state.name)}
/>

2. 补充Platform的导入：

import { StyleSheet, SafeAreaView ,Text, ScrollView ,TextInput, Alert, Button, View, Platform } from "react-native";

3. （可选）如果没有使用Formik，删除TextInput的onBlur={() => setFieldTouched("name")}这行代码，或者补全Formik的初始化逻辑。

优化建议 #

保存成功后清空输入框内容，可修改addData方法如下：

addData=(name)=>{
  if (name === null || name === "") {
    Alert.alert("提示","请输入客户名称")
    return false;
  }
  db.transaction((tx) => {
    tx.executeSql("insert into addCustomer (name) values (?)", [name], () => {
      // 插入成功后清空输入框
      this.setState({name: null})
      Alert.alert("提示","客户信息保存成功")
    }, (tx, error) => {
      console.log("插入失败", error)
    });
  });
}

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