Question

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

我正在尝试学习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”。

有什么建议吗？

Answer 1

要访问您知道ID的单个文档，请参阅getting a single document和getting 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)

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

1 个答案: