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

嗨，我被困在一个反应函数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;

导入“firebase/数据库”；
从“React”导入React，{useState}；
const geofire=要求（“geofire”）；
常量firebaseConfig={
//我的配置
};
firebase.initializeApp（firebaseConfig）；
//const userKey=“slg3”；
const firebaseRef=firebase.database（）.ref（“用户/地点”）；
const geoFire=新geoFire.geoFire（firebaseRef）；
//设置（userKey，[26.71,88.43]），然后(
//函数（）{
//console.log（“提供的密钥已添加到GeoFire”）；
//   },
//函数（错误）{
//日志（“错误：+错误”）；
//   }
// );
让geoQuery=geoFire.query({
中间：[26.71,88.43]，
半径：0.001，
});
常量数据库=（）=>{
const[pos，setPos]=useState（[]）；
geoQuery.on（“输入键”），功能（键、位置、距离）{
setPos（（上一个）=>[…上一个，位置]；
console.log(
钥匙+
“已在处输入查询”+
位置+
" (" +
距离+
“距离中心公里）”
);
});
返回(
{pos.map（（项目）=>{
返回{item}；
})}
);
};
导出默认数据库；

每次从geoQuery.on（）返回位置时，我都试图呈现h1。我试图将位置存储到状态变量，但我收到一个错误，错误为“错误：重新渲染过多。React限制渲染数量以防止无限循环。” 我正在使用geofire进行查询。

---

请帮忙，谢谢。

我的问题解决了。我在Useffect钩子中转移了这个代码

初始代码：-

更改代码：-

---

我的问题解决了。我在Useffect钩子中转移了这个代码

初始代码：-

更改代码：-

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

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