『React Nativeで、内部ストレージを使って、To do アプリを作成する』を演習する

下記HPを参考にしてます。

qiita.com

totolog34.com

このHPにでてくるもののTipsを上げておきます。

非同期処理については以前勉強したので詳細は割愛しますが、今回の非同期処理ではPromiseが使用されていないことに留意してください。また、非同期処理がでてくるのは、AsyncStorageオブジェクトのメソッドを使用するときのみです。

⓵　JSON.stringify( )　　　・・・オブジェクトリテラルをJSON文字列へ変換します。

② JSON.parse( ) 　　　　・・・JSON文字列をオブジェクトリテラルへ変換します。

③　Mapクラス　　　・・・　キーと値のペアを保持するものです。

内部ストレージもキーと値をペアで保持するような仕組みになってますので、Mapを使うのが便利です。

文字列を内部ストレージに保存して、それを表示するだけのプログラムをまず作りました。

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect, useState} from 'react';

export default function App() {

  const [datas, setDatas] = useState("");
  const storeData = async(value) => {
    try{
      await AsyncStorage.setItem('@storage_key',value);
    }catch(error){
      console.log(error);
    }
  }

  const getData = async() => {
    try{
      const value = await AsyncStorage.getItem('@storage_key');
      if(value !== null){
         setDatas(value);
         console.log(value);
      }

    }catch(error){
      console.log(error);
    }
  }

  storeData("おはよう");

  useEffect(() => {
    getData()
  },[]);

  return (
    <View style={styles.container}>
      <Text>{datas}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

配列を使ってやってみます。

やりながら、分かったことですが、内部ストレージの保存については、キーとデータと登録しなければいけないですが、そのあとは別にキー自体は使用する必要なく、データを配列としてもっておいて、それを利用していけばよい。

オブジェクトでやってみます