如何使用 useEffect 将 firebase 实时数据库中的更改显示到我的页面？

Question

I am doing firebase realtime database operation using useEffect() in my react js project. But when the data changes, the change does not come to my page. What is the solution to this?

  const [rideRequest, setRideRequest] = useState({});

  // RİDE REQUEST
  useEffect(() => {
    fireDb
      .child(`All Ride Requests/${id}`)
      .get()
      .then((snapshot) => {
        setRideRequest({ ...snapshot.val() });
      });
  }, [id]);

Answer 1

You are using .get() that'll fetch data only once from the database and won't listen for any updates. If you want real-time updates then you must use .on() as shown below:

useEffect(() => {
  fireDb
    .child(`All Ride Requests/${id}`)
    .on('value', (snapshot) => {
      setRideRequest(snapshot.val());
    });
}, [id]);

Checkout the documentation for more information.