Firebase实时数据库并未在React Native中获得OnPress的获取，必须刷新Ref（）。

Question

我有一个带有主节点“用户”的实时数据库，然后在其中我有3个子节点，这3个孩子节点有4个子节点，每个节点都有每个。四个节点之一是录制，一个是图像，其中2个是字符串。我正在尝试使用下一个和后退按钮动态获取它们，在下一步下，下一个节点的数据显示在屏幕上。

我正在使用USESTATE来动态更改数据库的路径（REF），但是按下下一个/后退按钮时，我在屏幕上的数据不会更新。另外，后来我发现，在刷新/重写ref（）时按下下一个/后按钮后。在函数上，我的数据将更新，但是我必须为每次按下都这样做。

这是我的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 钩子/效果取决于 hey 状态，因此您需要将后者指定为 useEffect 中的依赖项以进行数据加载。

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

另请参阅：

• 关于 useEffect 的文档，特别是该部分关于依赖关系。
• React 的 useEffect 依赖数组中的 setState