刷新页面后调用数据（React Native Hooks）

Question

首先是我的代码

const [getData, setGetData] = useState();
const [ref, setRef] = useState();

const initializeData = async() => {
  const userToken = await AsyncStorage.getItem('user_id');
  setGetData(JSON.parse(userToken));
}

useEffect(() => {
  return initializeData();
},[])

useEffect(() => {
  let interval;
  if(getData != null)
  {
    interval = setInterval(() => {
      setRef(firestore().collection('**********').where("SendersNo", "==", getData.number));
    }, 2000);
  }
  return () => clearInterval(interval);
},[getData])

useEffect(() => {

  if(ref != null)
  {
    return ref.onSnapshot(querySnapshot => {
      const list = [];
      querySnapshot.forEach(doc => {
          const {
              id,driverName,driverContactNumber,driverRating,driverPlateNumber,driverTrackingNumber,userPlaceName,
              destinationPlaceName,PaymentMethod,Fare
          } = doc.data();
          list.push({id: doc.id,driverName,driverContactNumber,driverRating,
            driverPlateNumber,driverTrackingNumber,userPlaceName,destinationPlaceName,PaymentMethod,Fare});
      });
      setUserBookingData(list);
      console.log("HEY!");
    });
  }
  
},[])

const CurrentTransaction = () => {
  if(ref == null)
  {
    return (
      <View>
        <Text>You don't have a Current Transaction</Text>
      </View>
    )
  }
  else
  {
    return userBookingData.map((element) => {
      return (
        <View key={element.id}>
             <View>
                 <Text>{element.name}</Text>
             </View>
        </View>
         )
        });
     }
}

所以目前我正在尝试的是，如果我的 firestore 上有数据，它将在屏幕上更新，但在更新它之前，我需要从 setGetData 获取数据，以便我可以查询但问题是，当我刷新整个 simulator/page 时，它没有获取数据，而只是一个空白页面。但是当我编辑并保存我的代码而不刷新 page/simulator 时，它可以获得数据。谁能帮我看看我做错了什么。

编辑

如果我这样做

useEffect(() => {
  if(ref != null)
  {
    return ref.onSnapshot(querySnapshot => {
      const list = [];
      querySnapshot.forEach(doc => {
          const {
              id,driverName,driverContactNumber,driverRating,driverPlateNumber,driverTrackingNumber,userPlaceName,
              destinationPlaceName,PaymentMethod,Fare
          } = doc.data();
          list.push({id: doc.id,driverName,driverContactNumber,driverRating,
            driverPlateNumber,driverTrackingNumber,userPlaceName,destinationPlaceName,PaymentMethod,Fare});
      });
      setUserBookingData(list);
      console.log("HEY!");
    });
  }
  else
  {
    return null;
  }
},[ref])

它一直循环 console.log('hey') 但它可以获取数据并显示它。但是它循环所以不好。

Answer 1

我相信来自 firebase 实时数据库的快照是一个监听器，因此它不需要设置间隔


useEffect(() => {
  if(getData != null)
  {
    const ref = firestore().collection('**********').where("SendersNo", "==", getData.number);
    ref.onSnapshot(querySnapshot => {
      const list = [];
      querySnapshot.forEach(doc => {
          const {
              id,driverName,driverContactNumber,driverRating,driverPlateNumber,driverTrackingNumber,userPlaceName,
              destinationPlaceName,PaymentMethod,Fare
          } = doc.data();
          list.push({id: doc.id,driverName,driverContactNumber,driverRating,
            driverPlateNumber,driverTrackingNumber,userPlaceName,destinationPlaceName,PaymentMethod,Fare});
      });
      setUserBookingData(list);
      console.log("HEY!");
    });

  }
  return () => {
   //clear your ref listener here
  }
},[getData])

如果你把return放在使用效果上，它将在不再使用屏幕后调用。

useEffect(()=>{
  //inside this will be called when the screen complete render
  const someListener = DeviceEventEmitter('listentosomething',()=>{
  //do something
  });
return ()=>{
 //inside this will be called after the screen no longer be used 
 //example go to other screen
someListener.remove();
}
},)

刷新页面后调用数据（React Native Hooks）

Call data after refreshing the page (React Native Hooks)

react-native

react-hooks

react-native-android