(React / Firebase) Как выводить данные из БД?

Question

Имеется база данных, а также сетка, в элементах которых надо вывести название и описание статьи, но пока здесь только лишь один элемент (картинки не трогаем).

Данные в БД:

Код сетки:

import * as React from 'react';
import { useState } from 'react';
import { styled } from '@material-ui/core/styles';
import { Grid, Container, Paper, Typography, ButtonBase, Box, IconButton } from '@material-ui/core';
import CloseRounded from '@material-ui/icons/CloseRounded';
import Popup from './Popup';
import axios from 'axios';

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "AIzaSyA...99u4aMc",
  authDomain: "blog...aseapp.com",
  databaseURL: "https://blog...firebasedatabase.app",
  projectId: "blog...8b",
  storageBucket: "blog...8b.appspot.com",
  messagingSenderId: "762...901",
  appId: "1:76...d6c",
  measurementId: "G-G...WK"
};

const app = initializeApp(firebaseConfig);

const Img = styled('img')({
    width: '280px',
    borderTopLeftRadius: '4px',
    borderTopRightRadius: '4px'
  });

export default function Body(){
    const [link, setLink] = React.useState("");

    React.useEffect(() => {
        const fetchLink = async () => {
          const response = await axios("https://picsum.photos/560/280");
          setLink(response.request.responseURL);
        };
        fetchLink();
      }, []);
    
    return(
        <Container component="main" maxWidth="lg" sx={{mt: 10}}>
            <Grid sx={{m: 'auto'}} container columns={3}>


                // Здесь код элемента сетки
                <Grid item sx={{m:1, ml:0.5}}>
                    <Paper sx={{ width: 280 }}>
                        <ButtonBase >
                        <Box position="absolute" top={0} right={0}>
                        <IconButton>
                            <CloseRounded
                                fontSize="small"
                                sx={{
                                background:'rgba(0,0,0,0.5)',
                                borderRadius:'90em',
                                fill: 'white',
                                p: 0.25
                                }}
                            />
                        </IconButton>
                        </Box>
                        <Img alt="image" src={link} />
                        </ButtonBase>
                        <Box sx={{ p: 1 }}>
                        <Typography variant="subtitle1">Crowd Prediction</Typography>
                        <Typography variant="caption">
                            Crowd Predictions in Ford to forecast weekly vehicles sale volumes
                            across business units
                        </Typography>
                        </Box>
                    </Paper>
                </Grid>



            </Grid>
            <Popup/>
        </Container>
    );
}

Главный файл index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import Header from './Header';
import Body from './Body';
import Form from './Form';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { initializeApp } from 'firebase/app';

ReactDOM.render(
    <div>
      <Header/>
      <BrowserRouter>
        <Switch>
          <Route path={'/'} exact component={Body}/>
          <Route path={'/create'} component={Form}/>
        </Switch>
      </BrowserRouter>
    </div>,
    document.getElementById('root')
);

reportWebVitals();

Как это делают? Вопрос конкретно состоит в том, что я не могу получить данные статей блога (заголовок и описание) из базы данных и вывести на страницу. И ещё - только TypeScript.

Answer 1

Вы можете использовать библиотеку @react-firebase/firestore

Подключите ее как указано ниже, и после чего подключитесь к базе

Попробуйте посмотреть работу этой библиотеки.

import firebase from "firebase/app";
import "firebase/firestore";
const s = (a: any) => JSON.stringify(a, null, 2);

import {
  FirestoreCollection,
  FirestoreProvider
} from "@react-firebase/firestore";
.
.
.
 <FirestoreProvider {...config} firebase={firebase}>
    <FirestoreCollection path={"YOUR_COLLECTION_NAME"}>
       {({ value }) => {
         return (
           <div>
              <pre>{s(value).title}</pre>
              <pre>{s(value).body}</pre>
           </div>
         );
       }}
    </FirestoreCollection>
</FirestoreProvider>

БЛОГ НА HUSL

(React / Firebase) Как выводить данные из БД?

Ответы (1 шт):