firebase 实时数据库在 react native 中没有通过 onPress 获取，每次都必须刷新 ref().on 函数

Question

我有一个带有主节点 'user' 的实时数据库，然后在其中我有 3 个子节点，这 3 个子节点还有 4 个子节点，每个子节点。 4 个节点之一是录音，一个是图像，另外两个是字符串。我正在尝试使用 Next 和 Back 按钮动态获取它们，在按下下一步时，下一个节点的数据将显示在屏幕上。

我正在使用 useState 动态更改数据库路径 (ref)，但是在按下 next/back 按钮时，我在屏幕上的数据没有得到更新。后来我发现当我 refresh/rewrite ref().on 函数时按下 next/back 按钮后，我的数据得到更新，但我必须在每次按下时都这样做。

这是我的 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;

Answer 1

因为你的 setData hook/effect 依赖于 hey 状态，你需要在 useEffect 中将后者指定为数据加载的依赖项。

useEffect(() => {
  getDatabase();   
}, [hey]);

另见：

关于 useEffect 的文档，特别是关于依赖项的部分。

firebase 实时数据库在 react native 中没有通过 onPress 获取，每次都必须刷新 ref().on 函数

firebase realtime database is not getting fetched with onPress in react native, have to refresh the ref().on function everytime

javascript

firebase

react-native

firebase-realtime-database

onpress