2022.11.29 ReactNative 打田裕馬
ReactNativeのSQLiteでデータが取れない時はPromise()を見直そう
export default function Home({ navigation }: RootTabScreenProps<'Home'>) {
const db = openDatabase();
const [diaries, setDiaries] = useState([]);
useEffect( () => {
console.log('Home : useEffect');
init();
}, []);
const init = async() => {
const results = await getDiaries(db);
console.log('init()')
await setDiaries(results)
console.log(results);
}
return (
<View style={styles.container}>
<Text style={styles.title}>Tab One</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<FlatList
data={diaries}
renderItem={({item}) => <Text style={styles.list}>{item.body}</Text>}
/>
</View>
);
export const getDiaries = async(db:object) => {
return new Promise((resolve, reject) => {
db.transaction((tx:any) => {
tx.executeSql(
// 実行したいSQL文
`select * from diaries;`,
// `.tables`,
// `.databases`,
// SQL文の引数
[],
// 成功時のコールバック関数
(_, { rows }) => {
console.log("select success");
console.log("select result:" + JSON.stringify(rows._array));
results = rows._array;
resolve(rows._array);
},
(error) => {
// 失敗時のコールバック関数
console.log("select fail");
console.log(error);
reject(error);
}
);
});
});
}
export const getDiaries = async(db:object) => {
return db.transaction((tx:any) => {
tx.executeSql(
// 実行したいSQL文
`select * from diaries;`,
// `.tables`,
// `.databases`,
// SQL文の引数
[],
// 成功時のコールバック関数
(_, { rows }) => {
console.log("select success");
console.log("select result:" + JSON.stringify(rows._array));
return rows._array;
},
(error) => {
// 失敗時のコールバック関数
console.log("select fail");
console.log(error);
return false;
}
);
});
}