わからないこと

掌田津耶乃・著「React Native入門」P.329のAsyncStorageデータベースのところをやっているのですが、
「PUT DATA」からデータを保存（できているのか怪しい？）して「GET DATA」ボタンを押しても「no data」と返されます。
コードも見返したのですが、間違っていそうなところはありません。

書籍の全文

js
1import React, { Component } from 'react';
2import { StyleSheet, View, ScrollView, Alert, AsyncStorage, Text, TextInput, Button } from 'react-native';
3import { Header } from 'react-native-elements';
4
5export default class App extends Component {
6  constructor(props) {
7    super(props);
8    this.input = '';
9    this.state = {
10      text: 'database access...',
11      id: '',
12      name: '',
13      mail: '',
14    };
15  }
16
17  doId = (text) => this.setState({ id:text });
18  doName = (text) => this.setState({ name:text });
19  doMail = (text) => this.setState({ mail:text });
20
21  doPut = async() => {
22    try {
23      let count = await AsyncStorage.getItem('MyData_count');
24      if(count == null) { count = 1; }
25      let data = {
26        name: this.state.name,
27        mail: this.state.mail
28      };
29      await AsyncStorage.setItem('MyData_' + count, JSON.stringify(data));
30      await AsyncStorage.setItem('MyData_count', '' + (count + 1));
31      this.setState({
32        id: '',
33        name: '',
34        mail: '',
35      });
36      Alert.alert('put data');
37    } catch (error) {
38      console.log(error);
39      Alert.alert(error);
40    }
41  }
42
43  doGet = () => {
44    try {
45      AsyncStorage.getItem('My Data_' + this.state.id)
46      .then((data) => {
47        if(data !== null) {
48          let obj = JSON.parse(data);
49          this.setState({
50            name: obj.name,
51            mail: obj.mail,
52          });
53        } else {
54          Alert.alert('no data');
55        }
56      });
57    } catch (error) {
58      console.log(error);
59      Alert.alert(error);
60    }
61  }
62
63  render() {
64    return (
65      <View style={styles.base}>
66        <Header
67          leftComponent={{
68            icon: 'menu', 
69            color: 'white', 
70            size: 25,
71            onPress: this.doActionLeft
72          }}
73          centerComponent={{
74            text: 'Sample App',
75            style: styles.header
76          }}
77          rightComponent={{
78            icon: 'android',
79            color: 'white',
80            size: 25,
81            onPress: this.doActionRight
82          }}
83          otherContainerStyles={{
84            height: 100,
85            backgroundColor: '#dd0000'
86          }}
87          innerContainerStyles={{
88            height: 100,
89            backgroundColor: '#dd0000'
90          }}
91        />
92
93        <View style={styles.body}>
94          <Text style={ styles.message }>
95            { this.state.text }
96          </Text>
97          <View style={{ flex: 4 }}>
98            <TextInput
99              style={ styles.input }
100              placeholder='ID:'
101              value={ this.state.id }
102              onChangeText={ this.doId }
103            />
104            <TextInput
105              style={ styles.input }
106              placeholder='NAME:'
107              value={ this.state.name }
108              onChangeText={ this.doName }
109            />
110            <TextInput
111              style={ styles.input }
112              placeholder='MAIL:'
113              value={ this.state.mail }
114              onChangeText={ this.doMail }
115            />
116            <Button title="PUT DATA" onPress={ this.doPut } />
117            <View style={{ padding:10 }} />
118            <Button title="GET DATA" onPress={ this.doGet } />
119          </View>
120        </View>
121      </View>
122    );
123  }
124  doActionLeft = () => { Alert.alert('Left icon tapped!'); }
125  doActionRight = () => { Alert.alert('Right icon tapped!'); }
126}
127
128const styles = StyleSheet.create ({
129  base: {
130    padding: 0,
131    flex: 1,
132    backgroundColor: '#ddd',
133  },
134  body: {
135    padding: 10,
136    flex: 1,
137    backgroundColor: '#fff',
138  },
139  header: {
140    color: '#fff',
141    fontSize: 28,
142    fontWeight: '100',
143  },
144  message: {
145    paddingTop: 10,
146    fontSize: 14,
147  },
148  input: {
149    margin: 10,
150    fontSize: 24,
151  }
152});

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1 doGet = () => {
2    try {
3      //AsyncStorage.getItem('My Data_' + this.state.id)
4      AsyncStorage.getItem('MyData_' + this.state.id) //MyとDataの間のスペースを削除
5    .........
6    }
7 }