如何从 Firebase 获取数据到我的 React 应用程序中

Question

拜托，我对 React.js 很陌生，并且遇到了从 Firebase 获取日期来填充它的挑战。 我希望能够获取单个属性而不是所有属性 - 例如（标题、正文和价格）。

useFetch 是我在项目中创建的一个自定义钩子，用于处理来自 firebase 的提取。

请问我在这里有什么问题吗？

import { useParams } from 'react-router-dom';
import useFetch from '../UseFetch';
import '../courseDetails/CourseDetails.css';
import { useState, useEffect } from 'react';

import React from 'react'

const CourseDetails = () => {
    const { id } = useParams();
    const { data:details, isLoading } = useFetch('https://tutorialwebsite-460f1-default-rtdb.firebaseio.com/courses.json');
    console.log(details);
    return (
        <div className="course-detail">
            <h2>{ id }</h2>
            <div>
                <p>{details.description}</p>
            </div>
        </div>
    )
}

export default CourseDetails

这是从 API 加载的 object：

{
  "-MaebRkqKfjLG8heBbSu": {
    "body": "qwerqwer",
    "description": "wqerqwetqwe",
    "imageUrl": "wdfwerw",
    "price": "werqwertwer",
    "title": "title 1"
  }
}

如何访问description ？

Answer 1

谢谢大家的回复，但我能够解决我的问题。 所以我所做的是改成一个用过的假 json api 而不是我最初使用的 firebase。 然后，在从 firebase 获取数据后，我能够根据唯一 id 动态路由到特定页面，然后使用条件渲染到 output 页面上的数据。 但是，我很想知道如何使用 firebase 来做到这一点。

const CourseDetails = () => {
    const { id } = useParams();
    const { data:details, isLoading } = useFetch('http://localhost:8000/courses/' + id);
    console.log(details)

        return (
        <div className="course-detail">
                {isLoading && <div>Loading...</div>}
                {details && <div>{details.body}</div> }

        </div>
    )
}

export default CourseDetails