У меня есть база данных в реальном времени с основным узлом «пользователь», а затем внутри нее у меня есть 3 дочерних узла, и у этих 3 дочерних узлов есть еще 4 дочерних узла, каждый из них. Один из 4 узлов — запись, один — изображение и 2 — строки. Я пытаюсь получить их динамически с помощью кнопок «Далее» и «Назад», где при нажатии «Далее» данные следующего узла отображаются на экране.
Я использую useState для динамического изменения пути к базе данных (ref), но при нажатии кнопки «Далее/Назад» мои данные на экране не обновляются. Также позже я обнаружил, что после нажатия кнопки «Далее/назад», когда я обновляю/переписываю функцию ref().on, мои данные обновляются, но я должен делать это при каждом нажатии.
Вот мой код App.js:
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;
Поскольку ваш setData
хук/эффект зависит от состояния hey
, вам нужно указать последнее как зависимость в useEffect
для загрузки данных.
useEffect(() => {
getDatabase();
}, [hey]);
Также см:
useEffect
, особенно раздел о зависимостях.
охфффф! Вы не представляете, как сильно вы мне помогли. Я абсолютный новичок в этом деле. Я так благодарен! Большое спасибо!