前提
初心者です。ウエブサイトを参考にしてReact NativeのExpoを利用しメモ帳アプリを作っています。(参考サイト:https://codezine.jp/article/detail/12328?p=1)
データを保存するためにAsyncStorageを使おうとしましたが、以下のエラーメッセージが発生しました。構成画面の保存ボタンを押すとエラー表示が出ます。
おそらく該当のソースコードの、データを格納&取り出す部分でエラーが起きていると思っているのですが、どこが間違っているのか分かりません。わかる方教えていただきたいです。
発生している問題・エラーメッセージ
TypeError: undefined is not an object (evaluating '_asyncStorage.AsyncStorage.getAllKeys') TypeError: undefined is not an object (evaluating '_asyncStorage.AsyncStorage.setItem')
該当のソースコード
JavaScript
1import { AsyncStorage } from '@react-native-async-storage/async-storage'; 2 3export const save = async (text, createdAt) => { 4 try { 5 const key = `${createdAt}`; 6 const value = JSON.stringify({ 7 text, 8 createdAt, 9 }); 10 await AsyncStorage.setItem(key, value); 11 } catch (e) { 12 alert (e) 13 } 14}; 15 16export const loadAll = async () => { 17 try { 18 const keys = await AsyncStorage.getAllKeys(); 19 keys.sort(); 20 const entryList = await AsyncStorage.multiGet(keys); 21 return entryList.map(entry => JSON.parse(entry[1])); 22 } catch (e) { 23 alert(e) 24 } 25};
メイン画面
js
1import React from 'react'; 2import { StyleSheet, View, FlatList } from 'react-native'; 3import { List, FAB } from 'react-native-paper'; 4import format from 'date-fns/format'; 5import { useNavigation } from '@react-navigation/native'; 6import { useState,useEffect } from 'react'; 7import { loadAll } from './store.js'; 8 9 10export const MainScreen = () => { 11 const navigation = useNavigation(); 12 const [memos, setMemos] = useState([]); 13 14 useEffect(() => { 15 16 const initialize = async () => { 17 const newMemos = await loadAll(); 18 setMemos(newMemos); 19 }; 20 21 const unsubscribe = navigation.addListener('focus', initialize); 22 23 return unsubscribe; 24 }, [navigation]); 25 26 const onPressAdd = () => { 27 navigation.navigate('Compose'); 28 }; 29 30 return ( 31 <View style={styles.container}> 32 <FlatList 33 style={styles.list} 34 data={memos} 35 keyExtractor={item => `${item.createdAt}`} 36 renderItem={({ item }) => ( 37 <List.Item 38 title={item.text} 39 titleNumberOfLines={5} 40 description={ 41 `作成日時: ${format(item.createdAt, 'yyyy.MM.dd HH:mm')}` // (2) 42 } 43 descriptionStyle={{ textAlign: 'right' }} 44 /> 45 )} 46 /> 47 <FAB 48 style={{ 49 50 position: 'absolute', 51 right: 16, 52 bottom: 16, 53 }} 54 icon="plus" 55 onPress={onPressAdd} 56 /> 57 </View> 58 ); 59 60 61} 62 63const styles = StyleSheet.create({ 64 container: { 65 flex: 1, 66 }, 67 list: { 68 flex: 1, 69 }, 70});
構成画面
js
1import React, { useState } from 'react'; 2import { StyleSheet, 3 KeyboardAvoidingView, 4 Platform 5 } from 'react-native'; 6import { TextInput, Button } from 'react-native-paper'; 7import { useNavigation } from '@react-navigation/native'; 8import { save } from './store.js'; 9 10export const ComposeScreen = () => { 11 const [ text, setText ] = useState(''); 12 const navigation = useNavigation(); 13 14 const onPressSave = async () => { 15 await save(text, Date.now()); 16 navigation.goBack(); 17 }; 18 19 return ( 20 <KeyboardAvoidingView 21 style={styles.container} 22 behavior={Platform.OS == "ios" ? "padding" : "height"} 23 > 24 <TextInput 25 style={{ marginBottom: 16 }} 26 mode="outlined" 27 placeholder="メモを入力してください" 28 multiline 29 onChangeText={(text) => setText(text)} 30 /> 31 <Button 32 mode="contained" 33 onPress={onPressSave} 34 > 35 保存 36 </Button> 37 </KeyboardAvoidingView> 38 ) 39}; 40 41const styles = StyleSheet.create({ 42 container: { 43 flex: 1, 44 padding: 16, 45 }, 46});

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/12 05:46