我的组件仅在对IDE进行编辑时呈现(React，Firebase和useEffect)

Question

我有一个不呈现的子组件，除非我在IDE代码中直接编辑。我已经尝试了多种方法。我试图得到一个数组的数据，但当我刷新或第一次渲染的控制台页面显示为空。我看到其他人也有类似的问题，但似乎我们没有完全相同的问题。

我已经尝试了多种方法来做到这一点与useEffect，但似乎没有工作。这是我的代码。

const NextVideo = ({courseName}) => {
const [videos, setVideos] = useState([]);
// const [loading, setLoading] = useState(false);
// const dataWork = async () => {
//   const q = query(collection(db, 'videos'), where('courseID', '==', courseName));
//   const querySnapshot = await getDocs(q);
//   let videos = []
//   querySnapshot.forEach((doc) => {
//     videos.push({
//       ...doc.data(),
//       id: doc.id,
//     });
//     setVideos(videos);
//   });
// }

// useEffect (() =>{
//   dataWork()
// }, []); 

//  useEffect(() => {  
//   const q = query(collection(db, 'videos'), where('courseID', '==', courseName));
//   const unsubscribe = onSnapshot(q, (querySnapshot) => {
//   const videos = []
//     if( videos.length === 0){
//       querySnapshot.forEach((doc) => {
//           videos.push({...doc.data(), id: doc.id });  
//           setVideos(videos);             
//       });
//     }else{
//       console.log('This array already exist')
//     }
//   });
// return () => unsubscribe();
// }, []);
const everything = () =>{
const q = query(collection(db, 'videos'), where('courseID', '==', courseName));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
const videos = []
if( videos.length === 0){
querySnapshot.forEach((doc) => {
videos.push({...doc.data(), id: doc.id });  
setVideos(videos);             
});
}else{
console.log('This array already exist')
}
});
}

useEffect(() => {  
everything();
}, []);

console.log(videos)
return (
<>
<Row className="mt-4">
<Col xs="12" sm="12" md="12" lg="8">
<video height="500" controls>
<source="https://vimeo.com/347119375" type="video/mp4"/>
</video>
<h3 style={{textAlign:"left", color: '#fcc981', fontWeight:"bold"}}>Video Title</h3>
</Col>
<Col>
<Stack className="vBody" gap={3}>
{videos.map((video)=>(
<div key={video.title} className="py-3 px-2" style={{background: '#0F0C0E'}}>
<h5 style={{fontWeight:'bold'}}>{video.title}</h5>
<ul>
<li>Length: {video.videoLength}</li>
<li>Now Watching</li>            
</ul>
</div>
))}
</Stack> 
</Col>
</Row>
<Stack className="vBody">
<h4>Description:</h4>
<p> Words </p>
<h4>Instructor(s): </h4>
<p> Names</p>
<Accordion className="mt-4" defaultActiveKey="0">
<Accordion.Item eventKey="0">
<Accordion.Header><h4>Transcript</h4></Accordion.Header>
<Accordion.Body style={{backgroundColor: '#0F0C0E', color: '#ffffff'}}>
<p></p>
</Accordion.Body>
</Accordion.Item>
</Accordion>
</Stack> 
</>     
);
}
export default NextVideo;

Answer 1

我注意到的一件事是，您没有从useEffect回调返回任何东西，这意味着React将很难管理组件的生命周期。不确定这是否是您所描述的问题的原因，但您肯定希望以任何一种方式更新它:

const everything = () => {
const q = query(collection(db, 'videos'), where('courseID', '==', courseName));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
const videos = []
if( videos.length === 0){
querySnapshot.forEach((doc) => {
videos.push({...doc.data(), id: doc.id });  
setVideos(videos);             
});
}else{
console.log('This array already exist')
}
});
return unsubscribe; // 👈
}

然后

useEffect(() => {  
return everything();
}, []);

或短:

useEffect(() => everything(), []);

Answer 2

所以我得到了一些帮助，得到了答案，以防将来有人遇到同样的问题。

useEffect(() => {
(async () => {
const q = query(collection(db, 'videos'), where('courseID', '==', courseName));
const querySnapshot = await getDocs(q);
console.log(querySnapshot)
let videos = []
querySnapshot.forEach((doc) => {
videos.push({
...doc.data(),
id: doc.id,
});
setVideos(videos);
console.log(videos)
});
})()
}, [courseName])