如何将此函数转换为 class 组件,以便我可以使用 render 调用 return?
How do I convert this function into a class component so that I can use render to call the return?
以下代码的目标是将移动 object 中的数据导入到用户 ID 下的 firestore 数据库中。一切正常,除了当我点击喜欢的按钮时,显示不会更新。我从 console.log 语句中得知,当按下赞按钮时,会从数组中正确选择另一部电影(使用随机索引变量),但实际标题和封面不会随着参考电影的变化而更新.
如何更改代码,以便 return 语句在我按下喜欢的按钮后再次执行并更新显示?
import React, { useState, useEffect } from 'react';
import './App.css';
import firebase from 'firebase/compat/app';
import 'firebase/database';
import 'firebase/firestore';
function RateMovies() {
const popularMoviesRef = firebase.database().ref("/popular_movies");
const [popularMovies, setPopularMovies] = React.useState([]);
useEffect(() => {
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,
moviePoster: data.movie_poster,
movieYear: data.movie_year,
movieGenre: data.movie_genre,
movieRating: data.imdb_rating
}])
});
});
}, []);
var index = Math.floor(Math.random() * (1000 + 1));
var movie = popularMovies[index];
const auth = firebase.auth();
var db = firebase.firestore();
var user_id = auth.currentUser.uid;
function likedMovie() {
db.collection('users').doc(user_id).update({
"Rated.liked": firebase.firestore.FieldValue.arrayUnion({
key: movie.key,
movieTitle: movie.movieTitle,
moviePoster: movie.moviePoster,
movieYear: movie.movieYear,
movieGenre: movie.movieGenre,
movieRating: movie.movieRating,
}),
})
.then(function(){
console.log("Successfully updated!");
});
index = Math.floor(Math.random() * (1000 + 1));
movie = popularMovies[index];
}
return (
<div>
<p>Rate Movies Here</p>
<div> {movie?.movieTitle} </div>
<div> {movie?.movieYear} </div>
<br/>
<button onClick={likedMovie}> Like</button>
<button> Disike</button>
<br/>
<br/>
<img class="rate-image" src = {`${movie?.moviePoster}`} />
</div>
)
}
export default RateMovies;
如果你想使用功能组件,只需去掉 render 方法并保持这样:
return (
<div>
<p>Rate Movies Here</p>
<button onClick={likedMovie}> Like</button>
</div>
);
不是最好的解决方案,而是一种解决方法
const [render, setRender] = React.useState(1);
useEffect(() => {
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,
moviePoster: data.movie_poster,
movieYear: data.movie_year,
movieGenre: data.movie_genre,
movieRating: data.imdb_rating
}])
});
});
}, [render]);
var index = Math.floor(Math.random() * (1000 + 1));
var movie = popularMovies[index];
const auth = firebase.auth();
var db = firebase.firestore();
var user_id = auth.currentUser.uid;
function likedMovie() {
db.collection('users').doc(user_id).update({
"Rated.liked": firebase.firestore.FieldValue.arrayUnion({
key: movie.key,
movieTitle: movie.movieTitle,
moviePoster: movie.moviePoster,
movieYear: movie.movieYear,
movieGenre: movie.movieGenre,
movieRating: movie.movieRating,
}),
})
.then(function(){
console.log("Successfully updated!");
setRender(render++)
});
index = Math.floor(Math.random() * (1000 + 1));
movie = popularMovies[index];
}
以下代码的目标是将移动 object 中的数据导入到用户 ID 下的 firestore 数据库中。一切正常,除了当我点击喜欢的按钮时,显示不会更新。我从 console.log 语句中得知,当按下赞按钮时,会从数组中正确选择另一部电影(使用随机索引变量),但实际标题和封面不会随着参考电影的变化而更新.
如何更改代码,以便 return 语句在我按下喜欢的按钮后再次执行并更新显示?
import React, { useState, useEffect } from 'react';
import './App.css';
import firebase from 'firebase/compat/app';
import 'firebase/database';
import 'firebase/firestore';
function RateMovies() {
const popularMoviesRef = firebase.database().ref("/popular_movies");
const [popularMovies, setPopularMovies] = React.useState([]);
useEffect(() => {
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,
moviePoster: data.movie_poster,
movieYear: data.movie_year,
movieGenre: data.movie_genre,
movieRating: data.imdb_rating
}])
});
});
}, []);
var index = Math.floor(Math.random() * (1000 + 1));
var movie = popularMovies[index];
const auth = firebase.auth();
var db = firebase.firestore();
var user_id = auth.currentUser.uid;
function likedMovie() {
db.collection('users').doc(user_id).update({
"Rated.liked": firebase.firestore.FieldValue.arrayUnion({
key: movie.key,
movieTitle: movie.movieTitle,
moviePoster: movie.moviePoster,
movieYear: movie.movieYear,
movieGenre: movie.movieGenre,
movieRating: movie.movieRating,
}),
})
.then(function(){
console.log("Successfully updated!");
});
index = Math.floor(Math.random() * (1000 + 1));
movie = popularMovies[index];
}
return (
<div>
<p>Rate Movies Here</p>
<div> {movie?.movieTitle} </div>
<div> {movie?.movieYear} </div>
<br/>
<button onClick={likedMovie}> Like</button>
<button> Disike</button>
<br/>
<br/>
<img class="rate-image" src = {`${movie?.moviePoster}`} />
</div>
)
}
export default RateMovies;
如果你想使用功能组件,只需去掉 render 方法并保持这样:
return (
<div>
<p>Rate Movies Here</p>
<button onClick={likedMovie}> Like</button>
</div>
);
不是最好的解决方案,而是一种解决方法
const [render, setRender] = React.useState(1);
useEffect(() => {
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,
moviePoster: data.movie_poster,
movieYear: data.movie_year,
movieGenre: data.movie_genre,
movieRating: data.imdb_rating
}])
});
});
}, [render]);
var index = Math.floor(Math.random() * (1000 + 1));
var movie = popularMovies[index];
const auth = firebase.auth();
var db = firebase.firestore();
var user_id = auth.currentUser.uid;
function likedMovie() {
db.collection('users').doc(user_id).update({
"Rated.liked": firebase.firestore.FieldValue.arrayUnion({
key: movie.key,
movieTitle: movie.movieTitle,
moviePoster: movie.moviePoster,
movieYear: movie.movieYear,
movieGenre: movie.movieGenre,
movieRating: movie.movieRating,
}),
})
.then(function(){
console.log("Successfully updated!");
setRender(render++)
});
index = Math.floor(Math.random() * (1000 + 1));
movie = popularMovies[index];
}