Ошибки React Native: TypeError: невозможно преобразовать нулевое значение в объект, движок js: hermes и нарушение инварианта: «основной» не зарегистрирован

Я новичок в мире React Native и пытаюсь учиться, разрабатывая для себя простые проекты. Я пытаюсь создать приложение списка задач, и теперь я хочу, чтобы мои данные сохранялись с помощью sqlite, но я столкнулся с двумя проблемами:

1 - Нарушение инварианта: "основной" не зарегистрирован. Это может произойти, если:

  • Metro (локальный сервер разработки) запускается из неправильной папки. Проверьте, запущено ли Metro, остановите его и перезапустите в текущем проекте.
  • Не удалось загрузить модуль из-за ошибки, и AppRegistry.registerComponent не был вызван., js engine: hermes в node_modules/react-native/Libraries/Core/ExceptionsManager.js:102:17 в reportException в node_modules/react-native/Libraries/Core/ExceptionsManager.js:148:19 в handleException
  • ... еще 7 кадров стека из внутренностей фреймворка

2 — TypeError: невозможно преобразовать нулевое значение в объект, движок js: hermes в node_modules/react-native/Libraries/Core/ExceptionsManager.js:102:17 в reportException в node_modules/react-native/Libraries/Core/ExceptionsManager.js:148:19 в handleException в node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:39 в handleError в node_modules/expo/build/errors/ExpoErrorManager.js:25:19 в errorHandler в node_modules/expo/build/errors/ExpoErrorManager.js:30:24 в в node_modules/@react-native/polyfills/error-guard.js:49:36 в ErrorUtils.reportFatalError в node_modules/metro-runtime/src/polyfills/require.js:225:40 в guardedLoadModule в node_modules/metro-runtime/src/polyfills/require.js:127:23 в metroRequire по адресу http://192.168.1.61:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:null в глобальном масштабе

Это код в моем файле TodoListScreen.js:

import React, { useState, useEffect } from "react";
import {
  View,
  StatusBar,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
  Appearance,
  StyleSheet,
} from "react-native";
import Icon from "react-native-vector-icons/MaterialIcons";
import SQLite from "react-native-sqlite-storage";

const db = SQLite.openDatabase(
  {
    name: "TodoList",
    location: "default",
  },
  () => {},
  (error) => {
    console.info(error);
  }
);

const createTable = () => {
  // create table if not exists
  db.transaction((tx) => {
    tx.executeSql(`CREATE TABLE IF NOT EXISTS todos (id INTEGER PRIMARY KEY AUTOINCREMENT, value TEXT NOT NULL);`);
  });
};

const TodoListScreen = () => {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState("");

  const fetchTodos = () => {
    db.transaction((tx) => {
      tx.executeSql(
        "SELECT * FROM todos",
        [],
        (_, { rows }) => {
          setTodos(rows._array);
        },
        (_, error) => {
          console.info("Error fetching todos: ", error);
        }
      );
    });
  };

  const handleAddTodo = () => {
    if (text.length > 0) {
      db.transaction((tx) => {
        tx.executeSql(
          "INSERT INTO todos (text) VALUES (?)",
          [todoText],
          () => {
            console.info("Todo added successfully");
            fetchTodos();
            setTodoText("");
          },
          (_, error) => {
            console.info("Error adding todo: ", error);
          }
        );
      });
    }
  };

  const handleRemoveTodo = (id) => {
    db.transaction((tx) => {
      tx.executeSql(
        "DELETE FROM todos WHERE id = ?",
        [id],
        () => {
          console.info("Todo deleted successfully");
          fetchTodos();
        },
        (_, error) => {
          console.info("Error deleting todo: ", error);
        }
      );
    });
  };

  const systemTheme = Appearance.getColorScheme(); // Retrieve the system theme
  const [themeMode, setThemeMode] = useState(systemTheme);

  useEffect(() => {
    createTable(); // create table in db if not exists
    fetchTodos(); // fetch db todos

    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
      setThemeMode(colorScheme === "dark");
    });

    return () => {
      subscription.remove();
    };
  }, []);

  const toggleDarkMode = () => {
    themeMode == "light" ? setThemeMode("dark") : setThemeMode("light");
  };

  const containerStyle =
    themeMode == "light" ? styles.containerDark : styles.containerLight;
  const iconColor = themeMode == "light" ? "white" : "#292929";
  const textColor = themeMode == "light" ? "white" : "#292929";

  return (
    <View style = {[styles.container, containerStyle]}>
      <StatusBar style = {styles.bar}></StatusBar>
      <Text style = {[styles.title, { color: textColor }]}>Da Fá</Text>
      {todos.length > 0 && todos.map((todo) => (
        <TouchableOpacity
          key = {todo.id}
          style = {styles.todoContainer}
          onPress = {() => handleRemoveTodo(todo.id)}
        >
          <Text style = {[styles.delete, { borderColor: textColor }]}></Text>
          <Text style = {[styles.todoText, { color: textColor }]}>
            {todo.text}
          </Text>
        </TouchableOpacity>
      ))}
      <View style = {styles.inputContainer}>
        <TouchableOpacity style = {styles.addButton} onPress = {handleAddTodo}>
          <Icon name = "add" size = {24} color = {iconColor} />
        </TouchableOpacity>
        <TextInput
          style = {[styles.input, { color: textColor }]}
          placeholder = "Add a todo..."
          placeholderTextColor = {textColor}
          value = {text}
          onChangeText = {(value) => setText(value)}
          onSubmitEditing = {handleAddTodo}
        />
      </View>
    </View>
  );
};

export default TodoListScreen;

Я тестирую его на своем устройстве Android через приложение expo go, может ли кто-нибудь мне помочь?

Спасибо!

0
0
92
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Эту ошибку иногда бывает трудно отладить, потому что причина не всегда очевидна. Единственное, что бросается в глаза, это то, что вы используете и Expo, и внешнюю библиотеку react-native-sqlite-storage. Expo может быть немного привередливым к нативным зависимостям, что может быть причиной проблемы.

Можете ли вы попробовать удалить всю логику SQLite с этого экрана и просто отобразить пустой вид? Если это сработает, я бы предположил, что проблема в react-native-sqlite-storage. Вы можете попробовать еще раз пройти инструкции по установке библиотеки, чтобы убедиться, что вы все сделали правильно. Но вам может понадобиться переключиться на использование expo-sqlite (npx expo install expo-sqlite). Эта библиотека предоставляется Expo, поэтому она гарантированно будет работать с вашей средой разработки.

вы спасли меня! Просто удалил пакет sqlite и установил его из библиотеки expo и изменил зависимости, чтобы он работал! Спасибо за помощь, чувак, я у тебя в долгу :)

Matteo_Konsept 18.05.2023 13:36

Другие вопросы по теме