使用React JS从CloudFirestore获取特定帖子

问题描述 投票:0回答:1

所以,我有一个新问题。我已经尝试解决了几天而没有成功。

我正在尝试学习react,并在展示视频的地方创建了reactjs网站。

首先,我在从查询字符串中获取ID时遇到了问题,但是已经解决了。

我的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

所以现在它循环所有帖子,效果很好,但我只想显示一个特定的帖子,其ID来自'props.match.params.id'。

有什么建议吗?

reactjs firebase google-cloud-firestore
1个回答
0
投票

要访问您知道ID的单个文档,请参阅getting a single documentgetting realtime updates上的文档。基于此:

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

    setTimes(newTimes)
})

您需要将ID传递给您似乎忘记了的getDataFromDB

const videoEvent = getDataFromDB(props)
© www.soinside.com 2019 - 2024. All rights reserved.