React native fetching GeoFire，flatlist 中只能显示一个数据答案

【问题标题】：React native fetching GeoFire and only one data can display in flatlistReact native fetching GeoFire，flatlist 中只能显示一个数据
【发布时间】：2019-12-17 19:47:31
【问题描述】：

我正在使用 react native 和 Geofire 创建一个应用程序，它会获取最近的位置并显示在 FlatList 中。我的代码基于this stackoverflow answer，我不知道为什么我不能显示数据。

我的数据库结构：数据节点包含GeoFire设置的data和location。显然，它们具有相同的密钥。

我尝试console.log 看看代码中发生了什么。它显示了在 3 个数组中获取 3 次的数据。

这是我的代码 firebase 代码：（我尝试了不同的 radius 以查看结果，它获取了预期的结果，所以它工作正常，我也尝试使用 once 而不是 on 但没有运气)

export const useGeoFireDatabaseQuery = (coordinates) => {

  const [data, setData] = useState([])
  const geoQuery = geoFire.query({
    center: coordinates,
    radius: 2
  });

  useEffect(()=>{
    if (coordinates != null) {
    geoQuery.on("key_entered",  (key, location, distance)=> {
      firebase.database().ref('data').child(key).on('value', (snapshot) => {
     const dataList=[]
      snapshot.forEach(doc => {
        dataList.push(doc.val())
       })

         setData(dataList)
      })

    })
    }
    },[])
  console.log('Data',data)
  return data
}

我的问题是 firebase 和 geoFire 运行了 3 次，所以我无法将所有数据放在一起。它只会将“最后一个”setState 数据显示到平面列表中。 我该如何解决这个问题？ 非常感谢！

【问题讨论】：

标签： reactjs firebase react-native geofirex

【解决方案1】：

由于您总是在const dataList=[]; 行中将dataList 创建为一个空数组，因此组件在每次获取新数据时都会忘记其旧状态。相反，您可以在添加新项目之前将当前的data 数组复制到dataList：

const dataList = [...data];

附带说明，useEffect 钩子的第二个参数当前是一个空数组 ([])。为了让您的查询在coordinates 更改时保持最新，您应该在数组中包含coordinates：

useEffect(() => {
    // ...
},[coordinates]);

【讨论】：