當我運行這個時，我得到了錯誤
型別錯誤：無法讀取未定義的屬性（讀取“電影標題”）
，但我已經通過 console.log 檢查并確認 poplarMovies 正在填充，并且 poplarMovies[0].movi??eTitle 正確回傳標題。
function RateMovies() {
var popularMoviesRef = firebase.database().ref("/popular_movies");
popularMoviesRef.once("value", function(snapshot){
snapshot.forEach(function(childSnapshot){
var key = childSnapshot.key;
var data = childSnapshot.val();
popularMovies.push({
key: key,
movieTitle: data.movie_title,
moviePosterLink: data.movie_poster,
movieYear: data.movie_year,
movieGenre: data.movie_genre,
movieRating: data.movie_rating
})
});
console.log(popularMovies);
console.log(popularMovies[0].movieTitle);
});
return (
<div>
<p>Rate Movies Here</p>
<p> {popularMovies[0].movieTitle} </p>
</div>
)
}
匯出默認的 RateMovies；
uj5u.com熱心網友回復：
您可以像這樣使用“React.useState”：
function RateMovies() {
const popularMoviesRef = firebase.database().ref("/popular_movies");
const [popularMovies, setPopularMovies] = React.useState([]);
popularMoviesRef.once("value", function(snapshot){
snapshot.forEach(function(childSnapshot){
var key = childSnapshot.key;
var data = childSnapshot.val();
setPopularMovies(currMovies => [...currMovies,{
key: key,
movieTitle: data.movie_title,
moviePosterLink: data.movie_poster,
movieYear: data.movie_year,
movieGenre: data.movie_genre,
movieRating: data.movie_rating
}])
});
console.log(popularMovies);
console.log(popularMovies[0].movieTitle);
});
return (
<div>
{popularMovies.map(movie => <React.Fragment>
<p>Rate Movies Here</p>
<p> {movie.movieTitle}</p>
</React.Fragment>)}
</div>
)
}
export default RateMovies;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/327232.html