質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

Q&A

解決済

1回答

2251閲覧

[React Native]TypeError: undefined is not an object (evaluating 'db.transaction')

aiai8976

総合スコア112

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

0グッド

0クリップ

投稿2021/07/27 02:23

編集2021/07/27 02:24

前提・実現したいこと

react nativeのexpoでアプリ開発の勉強をしています。
SQLiteを使いたいのですが、以下のようなエラーが出て困っています。
記事を参考にしているのですが、自分の環境だとうまくいきません。
useEffectでは読み込めているのでdbには参照が入っているはずなのですが、
insert時にdbがundefinedになってしまいます。

原因がわかる方がいましたら、コメントお願いします。

####参考
https://garmi.blog/2020/09/15/react-native-expo-sqlite%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/

発生している問題・エラーメッセージ

TypeError: undefined is not an object (evaluating 'db.transaction')

該当のソースコード

js

1import { StatusBar } from "expo-status-bar"; 2import React, { VFC, useState, useEffect } from "react"; 3import { 4 StyleSheet, 5 Text, 6 View, 7 TouchableOpacity, 8 TextInput, 9 Button, 10} from "react-native"; 11import { StackNavigationProp } from "@react-navigation/stack"; 12import { RouteProp } from "@react-navigation/native"; 13import DateTimePickerModal from "react-native-modal-datetime-picker"; 14import * as SQLite from 'expo-sqlite'; 15import * as FileSystem from "expo-file-system"; 16 17import { RootStackParamList } from "../../../types/navigation"; 18import { RightArrowIcon } from "../../Atoms/RightArrowIcon"; 19import { DropdownMenu } from "../../Molecules/DropdownMenu"; 20import { Separator } from "../../Atoms/Separator"; 21 22type Props = { 23 navigation: StackNavigationProp<RootStackParamList, "Input">; 24 route: RouteProp<RootStackParamList, "Input">; 25}; 26 27 28 29export const InputScreen: VFC<Props> = ({ navigation, route }) => { 30 //略 31 const [items, setItems] = useState<SQLite.SQLResultSet>(); 32 let db: any; 33 34 useEffect(() => { 35 initializeDatabase(); 36 }, []) 37 38 const initializeDatabase = () => { 39 // DBの作成先 40 console.log(FileSystem.documentDirectory + "SQLite/"); 41 42 // DBのオープン 43 db = SQLite.openDatabase("DB.db"); 44 45 db.transaction((tx: any) => { 46 tx.executeSql( 47 "create table if not exists costHistory (id integer primary key autoincrement, cost integer not null, category string not null, memo string, date date not null);", 48 null, 49 () => { // 成功時のコールバック 50 console.log("initialize success"); 51 }, 52 () => { // 失敗時のコールバック 53 console.log("initialize fail"); 54 return true; // ロールバックする場合はtrueを返す 55 } 56 ); 57 }); 58 } 59 60 const errorDB = () => { 61 console.log('DB open failed.'); 62 } 63 64 65 const showDatePicker = () => { 66 setDatePickerVisibility(true); 67 }; 68 69 const hideDatePicker = () => { 70 setDatePickerVisibility(false); 71 }; 72 73 const handleConfirm = (date: Date) => { 74 setDate(date); 75 hideDatePicker(); 76 }; 77 const onPress = (account_name: string) => { 78 navigation.navigate("Account", { account_name }); 79 }; 80 const onClickStore = () => { 81 db.transaction((tx: any) => { 82 tx.executeSql( 83 "insert into costHistory (cost, category, memo, date) values (?, ?, ?, ?);", 84 [cost, category, memo, date], 85 () => { 86 console.log("insert success"); 87 }, // 成功時のコールバック関数 88 () => { 89 console.log("insert fail"); 90 91 return true; // ロールバックする場合はtrueを返す 92 } // 失敗時のコールバック関数 93 ); 94 tx.executeSql( 95 "select * from costHistory;", 96 [], 97 (_, resultSet: any) => { 98 setItems(resultSet); 99 console.log("select success"); 100 for (let i = 0; i < resultSet.rows.length; i++) { 101 const id = resultSet.rows.item(i).id; 102 const name = resultSet.rows.item(i).name; 103 console.log(resultSet?.rows); 104 console.log(`${id}:${name}`); 105 } 106 }, 107 () => { 108 console.log("select fail"); 109 return false; 110 } 111 ) 112 }); 113 }; 114 return ( 115 // 略 116 ); 117}; 118 119const styles = StyleSheet.create({ 120 // 略 121}); 122

試したこと

app.jsonにsdkVersionの追加

{ "expo": { "name": "app", "slug": "app", "sdkVersion": "41.0.0", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "updates": { "fallbackToCacheTimeout": 0 }, "assetBundlePatterns": ["**/*"], "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#FFFFFF" } }, "web": { "favicon": "./assets/favicon.png" } } }

補足情報(FW/ツールのバージョンなど)

"expo": "~41.0.1",
"expo-file-system": "~11.0.2",
"expo-sqlite": "~9.1.0",

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

以下をグローバルに定義することで解決しました。

js

1const db = SQLite.openDatabase("DB.db");

投稿2021/07/27 02:37

aiai8976

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問