I have a realtime database with main node 'user' and then inside it i have 3 child nodes and those 3 child nodes have 4 more child nodes, each of them. One of the 4 nodes is a recording, one is image and 2 of them are strings. I am trying to fetch them dynamically with Next and Back button where on pressing next, next node's data is displayed on screen.
I am using a useState for dynamically changing the path of database (ref), but on pressing the next/back button, my data on screen does not get updated. Also later I found out that after pressing next/back button when I refresh/rewrite the ref().on function, my data gets updated, but I have to do this for every press.
Here's my App.js code:
import Sound from 'react-native-sound';
import database from '@react-native-firebase/database';
import storage from '@react-native-firebase/storage';
import React , {useEffect, useState} from 'react';
import {
ScrollView,
StyleSheet,
Alert,
Text,
View,
Image,
Button
} from 'react-native';
const App = () => {
const [myData,setData] = useState({
letter:'',
pronun:'',
word:'',
image:''
});
const [img,setimg] = useState(null);
const [pronunn,setpronun] = useState(null);
const [hey,sethey] = useState(1);
useEffect(() => {
getDatabase();
}, []);
function getDatabase() {
database().ref('users/' hey '/').on('value' , (snapshot) => {
Sound.setCategory('Playback', true);
var poo=new Sound(snapshot.val().pronun);
setData({
letter: snapshot.val().letter,
word: snapshot.val().word,
image: setimg(snapshot.val().image),
pronun: setpronun(poo)
});
console.log(snapshot.val());
});
}
return (
<View style={{flex:1, backgroundColor:'#000000', alignContent:'center', alignItems:'center', justifyContent:'center'}}>
<ScrollView>
<Text style={{color:'#ffff'}}>
Letter: {myData ? myData.letter : 'loading...' }
</Text>
<Text style={{color:'#ffff'}}>
Word: {myData ? myData.word : 'loading...' }
</Text>
<Image style={{width:200, height:200}}
source={{uri: img}}
/>
<View>
<Button
title='Pronunciation'
onPress={() => {
return pronunn.play();
}}
>
</Button>
<Button title='Next' onPress={
() => {
if (hey>2) {
Alert.alert('no more records');
}
else {
return sethey(hey 1);
}
}
}
>
</Button>
<Button title='back' onPress={
() => {
if (hey<2) {
Alert.alert('no more records to go back');
}
else {
return sethey(hey-1);
}
}
}
>
</Button>
</View>
</ScrollView>
</View>
);
};
export default App;
CodePudding user response:
Since your setData
hook/effect depends on the hey
state, you need to specify the latter as a dependency in useEffect
for the data loading.
useEffect(() => {
getDatabase();
}, [hey]);
Also see:
- The documentation on
useEffect
, specifically the section on dependencies. - setState in React's useEffect dependency array