将 geofire 查询结果存储在钩子中

Question

嗨，我一直卡在 React 函数 useState 和 geofire 中。只想学习hooks和useState，苦苦思索解决方案却一点进展也没有。这是我的数据库组件代码，它抛出一个错误

import "firebase/database";
import React, { useState } from "react";
const geofire = require("geofire");

const firebaseConfig = {
  //my config
};
firebase.initializeApp(firebaseConfig);
// const userKey = "slg3";

const firebaseRef = firebase.database().ref("users/place");
const geoFire = new geofire.GeoFire(firebaseRef);

// geoFire.set(userKey, [26.71, 88.43]).then(
//   function () {
//     console.log("Provided key has been added to GeoFire");
//   },
//   function (error) {
//     console.log("Error: " + error);
//   }
// );

let geoQuery = geoFire.query({
  center: [26.71, 88.43],
  radius: 0.001,
});

const database = () => {
  const [pos, setPos] = useState([]);
  geoQuery.on("key_entered", function (key, location, distance) {
    setPos((prev) => [...prev, location]);
    console.log(
      key +
        " entered query at " +
        location +
        " (" +
        distance +
        " km from center)"
    );
  });

  return (
    <div className="location">
      {pos.map((item) => {
        return <h1>{item}</h1>;
      })}
    </div>
  );
};
export default database;

每次从 geoQuery.on() 返回位置时，我都试图渲染一个 h1。我正在尝试将位置存储到状态变量，但出现 “错误：重新渲染太多。 React 限制渲染次数以防止无限循环。” 我正在使用 geofire 进行查询。请帮忙，谢谢。

Answer 1

我的问题解决了。我已将此代码转移到 useEffect 挂钩中。

Initial code:-

geoQuery.on("key_entered", function (key, location, distance) {
    setPos((prev) => [...prev, location]);
    console.log(
      key +
        " entered query at " +
        location +
        " (" +
        distance +
        " km from center)"
    );
  });

Changed code:-

useEffect(() => { geoQuery.on("key_entered", function (key, location, distance) {
    setPos((prev) => [...prev, location]);
    console.log(
      key +
        " entered query at " +
        location +
        " (" +
        distance +
        " km from center)"
    );
  });},[]);

将 geofire 查询结果存储在钩子中

Store geofire query results in hooks

firebase

reactjs

geofire

react-hooks