Получить конкретный пост из CloudFirestore с React JS

Question

Итак, у меня новая проблема. Я пытался решить это пару дней безуспешно.

Я пытаюсь научиться реагировать, и у меня есть сайт activjs, на котором я показываю видео.

Сначала у меня возникла проблема с получением идентификатора из строки запроса, но я решил ее.

Код в моем video.js выглядит следующим образом:

function getDataFromDB(props) {


const [times, setTimes] = useState([])
const db = firebase.firestore();


useEffect(() => {

    fire.firestore().collection('videoEvent').onSnapshot((snapshot) => { //time is the db name
        const newTimes = snapshot.docs.map((doc) => ({
            id: doc.id,
            ...doc.data()

        }))

        setTimes(newTimes)
    })

}, [])
return times
 }

 const Video = (props) => {

const videoEvent = getDataFromDB()

const vidId = props.match.params.id;
console.log(vidId)
const { project } = props;
    return (

      <div className='div1080'>
        <div className='flex-container'>
            {videoEvent.map((videoEvent) =>
                 <div key={videoEvent.id} className='item' ><img className='imagevideo' src={photo} alt='hej' />
                  <br /> {videoEvent.Author} {videoEvent.Price} 
                  {props.match.params.id}
                  <Link to={'video/' + videoEvent.id}>{videoEvent.eventTitle}</Link>
                </div>


               )}
          </div>
        </div>
    )
}
export default Video

Так что теперь он зацикливает все посты, это работает нормально, но я просто хочу показать конкретный пост сидентификатор из «props.match.params.id».

Есть предложения?

Answer 1

Чтобы получить доступ к одному документу, для которого вы знаете идентификатор, см. Документацию по для получения одного документа и для получения обновлений в реальном времени. Исходя из этого:

fire.firestore().collection('videoEvent').doc(props.match.params.id).onSnapshot((doc) => {
    const newTimes = [{
      id: doc.id,
      ...doc.data()
    ])

    setTimes(newTimes)
})

Вам нужно будет передать идентификатор на getDataFromDB, который вы, кажется, забыли:

const videoEvent = getDataFromDB(props)