如何用useEffect向我的页面显示火基实时数据库中的变化？

Question

在realtime项目中，我正在使用useEffect()执行firebase实时数据库操作。但是当数据发生变化时，更改不会出现在我的页面上。解决这个问题的办法是什么？

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

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

Answer 1

您使用的是.get()，它只从数据库中获取一次数据，不会监听任何更新。如果需要实时更新，则必须使用.on()，如下所示：

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

有关更多信息，请查看文档。