Блог

Я разрабатываю веб-приложение с использованием ReactJS и firebase(firestore). На странице я извлекаю все документы из коллекции «отправленные» и сопоставляю их, чтобы отобразить компонент отправки. В документе есть поле «голосование», которым я хочу управлять, нажав на кнопку «проголосовать», присутствующую в карточке отправки.

Страница соревнований, на которой я получаю данные и передаю их через реквизиты в компоненте отправки. (Competition.js)

 import React, { useEffect, useState } from 'react'
import { Route, Switch } from "react-router-dom";
import { SRLWrapper } from "simple-react-lightbox";
import Card from '../../components/Competition-info/Card'; 
import Footer from '../../components/Footer/Footer';
import Nav from '../../components/Nav-new/Nav'
import Submissions from '../../components/Submissions/Submissions';
import Leaderboard from '../../components/Leaderboard/Leaderboard'; 
import './competition.css';
import firebase from '../../firebase'

const db = firebase.firestore();

const Competition = (props) => {
const options = {
    buttons: {
        showAutoplayButton: false,
        showDownloadButton: false
    }
};

const [mySubs, setMySubs] = useState([])
const [passSubs, setPassSubs] = useState([])

useEffect(() => {
    db.collection('submissions').where('competition_id', '==', props.match.params.id).get()
    .then((querySnap) => {
        querySnap.forEach((doc) => {
            setMySubs(prevState => [...prevState, doc.data()]);
        })
    })
    .catch((err) => {
        console.log('Error: ', err);
    })
},[])
console.log('mysubs: ', mySubs);
return (
    <div className='competition-pg'>
        <Nav />
        <div className='competition-content'>
            <div className='cover-img'>
                <div className='cover-dp'></div>
            </div>
            <Card id={props.match.params.id} />
            <section className='section-submission'>
                <Switch>
                    <Route path="/competition/participant" component={Leaderboard} />
                </Switch>
                <Leaderboard id={props.match.params.id} />
                <h2 className='submission-title'>Submissions</h2>
                <SRLWrapper options={options}>
                    <div className='submissions'>
                        {
                            mySubs amp;amp; mySubs.map(submission => {
                                return(
                                    <Submissions submission={submission} key={submission.id} />
                                )
                            })
                        }
                    </div>
                </SRLWrapper>
            </section>
            <Footer />
        </div>
    </div>
)
}


export default Competition
 

Submission.js

 import React, { useEffect, useState } from 'react'
import './submissions.css'
import { AiFillLike } from 'react-icons/ai';
import { FaShareAlt } from 'react-icons/fa';


const Submissions = (props) => {

return (
    <div className={`submission ${"active"?"selected":""}`} >
        <div className='sub-head'>
            <p>{props.submission.user_name}</p>
        </div>
        <div className='sub-img-container'>
         <img alt='' src={props.submission.photo_link} className='wrapper-img' />
        </div>
        <div className='vote-container'>
            <a href={()=>false} className='btn-vote'><AiFillLike /></a>
            <a href={()=>false} className='btn-vote'><FaShareAlt /></a>
        </div>
    </div>
)
}

export default Submissions
 

Веб-страница:

Моя база данных:

Итак, в основном я хочу обновить поле голосования в документе с помощью этой кнопки «проголосовать», которая присутствует в компоненте отправки. Как мне получить идентификатор конкретного документа, чтобы я мог его обновить?

Если вам нужно использовать как данные документа, так и идентификатор, вам, вероятно, следует завернуть ваши документы с дополнительной информацией.

Когда вы сопоставляете документы, Firestore вы можете заменить:

 querySnap.forEach((doc) => {
    setMySubs(prevState => [...prevState, doc.data()]);
})
 

С помощью этого кода:

 querySnap.forEach((doc) => {
    setMySubs(prevState => [
        ...prevState, 
        { 
            id: doc.id(), 
            data: doc.data(),
        },
    ]);
})
 

Не забудьте обновить свой другой код для использования .data поля.

Это позволяет вам манипулировать как содержимым документа, так и идентификатором (или любыми другими метаданными, которые вы хотите).