如何通过 React JS 博览会正确从 Firebase 实时数据库获取随机节点

跟进问题来自在控制台中记录变量时出现引用错误？ https://stackoverflow.com/questions/75509803/referenceerror-when-the-variable-is-being-logged-in-console/75509988#75509988.

控制台日志：

当前代码：

import { StyleSheet, Text, View } from 'react-native'

import {db} from '../firebase'
import React, {useEffect, useState} from 'react'
import {ref, get, orderByKey, limitToFirst} from 'firebase/database'

const SubScreen2 = () => {
  
  
  const [randomNumber, setRandomNumber]= useState([])
  const [todoData, setToDoData] = useState([])
  
  
  useEffect (() => {
    var random = 0
    get(ref(db, "food/Total")).then(snapshot => {
      const count = snapshot.val();
      random = Math.floor((Math.random() * count));
      console.log(random)
      return get(ref(db, `food/`), orderByKey(), limitToFirst(random + 1))
    }).then(snapshot => {
      const randomKey = Object.keys(snapshot.val())[random];
      setToDoData(snapshot.val()[randomKey]);
      
    }).catch(error => {
      console.log(error);
    })
  }, [])
  console.log(todoData)
  return (
    <View style={styles.container}>
      {todoData ? (
        <View>
          <Text>{todoData.Description}</Text>
          <Text>{todoData.Location}</Text>
          <Text>{todoData.Halal}</Text>
          <Text>{todoData.OH}</Text>
        </View>
      ) : (
        <Text>Loading...</Text>
      )}
    </View>
  )
}

export default SubScreen2

我无法通过以下方式获得随机节点const randomKey = Object.keys(snapshot.val())[random] as snapshot.val()[random]给我未定义的。根据我能得到的随机值得到这个随机节点的正确方法是什么？

我的数据库的一部分：

{
  "food": {
    "Bakery": {
      "Bakery Cuisine": {
        "Description": "Within North Spine Plaza",
        "Halal": "Yes",
        "Location": "50 Nanyang Ave, #01-20 North Spine Plaza, Singapore 639798",
        "OH": "Mon - Sat : 8 AM to 7 PM, Sun Closed"
      }
    },
    "Beverage": {
      "Beverage": {
        "Description": "Within the South Spine food court",
        "Halal": "No",
        "Location": "21 Nanyang Link, Singapore 637371",
        "OH": "Mon - Fri: 7 30 am to 8 pm, Sat - Sun/PH Closed"
      },
      "Beverages": {
        "Description": "Within North Spine Koufu",
        "Halal": "No",
        "Location": "76 Nanyang Dr, #02-03 North Spine Plaza, Singapore 637331",
        "OH": "Mon - Fri : 7 am to 8 pm, Sat : 7 am to 3 pm, Sun Closed"
      },
      "Boost": {
        "Description": "Within North Spine Plaza",
        "Halal": "No",
        "Location": "50 Nanyang Ave, #01-11 North Spine Plaza, Singapore 639798",
        "OH": "Mon - Fri : 10 am to 9 pm, Sat - Sun: 10 am to 6 pm"
      },
      
    "Total": 120,

我需要节点名称及其下的值是描述、清真、俄亥俄州和地点

Update：使用提供的解决方案

我的控制台日志显示 4 个（描述、清真、位置和 OH）未定义

我当前的数据库：

Part of my database:

{
  "Bakery": {
    "Bakery Cuisine": {
      "Description": "Within North Spine Plaza",
      "Halal": "Yes",
      "Latitude": 1.34714,
      "Location": "50 Nanyang Ave, #01-20 North Spine Plaza, Singapore 639798",
      "Longitude": 103.68066,
      "OH": "Mon - Sat : 8 AM to 7 PM, Sun Closed",
      "ShopNo": 1
    }
  },
  "Beverage": {
    "Beverage": {
      "Description": "Within the South Spine food court",
      "Halal": "No",
      "Latitude": 1.34253,
      "Location": "21 Nanyang Link, Singapore 637371",
      "Longitude": 103.68243,
      "OH": "Mon - Fri: 7 30 am to 8 pm, Sat - Sun/PH Closed",
      "ShopNo": 2
    },
    "Beverages": {
      "Description": "Within North Spine Koufu",
      "Halal": "No",
      "Latitude": 1.34708,
      "Location": "76 Nanyang Dr, #02-03 North Spine Plaza, Singapore 637331",
      "Longitude": 103.68002,
      "OH": "Mon - Fri : 7 am to 8 pm, Sat : 7 am to 3 pm, Sun Closed",
      "ShopNo": 3
    },
    "Boost": {
      "Description": "Within North Spine Plaza",
      "Halal": "No",
      "Latitude": 1.34735,
      "Location": "50 Nanyang Ave, #01-11 North Spine Plaza, Singapore 639798",
      "Longitude": 103.68036,
      "OH": "Mon - Fri : 10 am to 9 pm, Sat - Sun: 10 am to 6 pm",
      "ShopNo": 4
    },
"Total": 89,
}

要在React Native中从Firebase实时数据库获取随机节点，可以修改代码如下：

import { StyleSheet, Text, View } from 'react-native'

import {db} from '../firebase'
import React, {useEffect, useState} from 'react'
import {ref, get, orderByKey, limitToFirst} from 'firebase/database'

const SubScreen2 = () => {
  
  
  const [randomNumber, setRandomNumber]= useState([])
  const [todoData, setToDoData] = useState([])
  
  
  useEffect (() => {
    get(ref(db, "food/Total")).then(snapshot => {
      const count = snapshot.val();
      const random = Math.floor((Math.random() * count));
      console.log(random)
      return get(ref(db, `food/`), orderByKey(), limitToFirst(random + 1))
    }).then(snapshot => {
      const randomNode = snapshot.val()[Object.keys(snapshot.val())[0]];
      const { Description, Halal, Location, OH } = randomNode;
      setToDoData({ Description, Halal, Location, OH });
      
    }).catch(error => {
      console.log(error);
    })
  }, [])
  console.log(todoData)
  return (
    <View style={styles.container}>
      {todoData ? (
        <View>
          <Text>{todoData.Description}</Text>
          <Text>{todoData.Location}</Text>
          <Text>{todoData.Halal}</Text>
          <Text>{todoData.OH}</Text>
        </View>
      ) : (
        <Text>Loading...</Text>
      )}
    </View>
  )
}

export default SubScreen2

在这段代码中，我们首先获取下面的节点总数food节点。然后我们生成一个 0 到计数之间的随机数。我们用orderByKey() and limitToFirst()获取随机索引处的节点的方法。然后我们提取节点的属性并将它们设置在todoData状态变量。我们使用解构和属性名称来访问节点的属性。最后，我们在 JSX 中显示节点的属性。

好看！