如何在React中切换按钮并将数字增加1或-1

Question

我正在处理喜欢和不喜欢的比率按钮，如youtube Concept(唯一投票(，我想点击该按钮，将喜欢的值增加1，将不喜欢的值减少-1。但当我点击按钮时，增量或减量会继续。

我会和你分享我的代码：

const SingleMovieCard = ({singleMovie : {id, title,image ,category, likes, dislikes}, removeMovie}) => {
const [isLike, setIsLike] = useState(likes);
const [isDislike, setIsDislike] = useState(dislikes);

const likeMovie = () =>  setIsLike(isLike + 1);
const dislikeMovie = () => setIsDislike(isDislike - 1) ;
return (
<section key={id} className="single-movie">
<img src={image} alt={title}/>
<footer>
<div className="movie-info">
<h2 className="title">{title}</h2>
<h4 className="category">{category}</h4>
</div>  

<div className="ratio-section">

<div>
<i onClick={likeMovie} class="far fa-thumbs-up"></i>
<h5>{isLike}</h5>
</div>

<div>
<i onClick={dislikeMovie} class="far fa-thumbs-down"></i>
<h5>{isDislike}</h5>
</div>
</div>
<button className="btn" onClick={()=> removeMovie(id)}>Delete </button>

</footer>


</section>
)
}

export default SingleMovieCard;

此组件的父元素：

import React from 'react';
import SingleMovieCard from '../SingleMovieCard/SingleMovieCard';

const MoviesCards = ({moviesList, removeMovie}) => {
return (
<section>        
<div className="grid-list">
{moviesList.map((singleMovie)=>  {
return(
<SingleMovieCard singleMovie={singleMovie}
key={singleMovie.id}
removeMovie={removeMovie} />
)
})}
</div>
</section>

)
}

export default MoviesCards;

这是数据：

export default [
{
id: '1',
title: 'Oceans 8',
image: 'https://i.ibb.co/8mt68ZB/wp3051367-oceans-8-wallpapers.jpg',
category: 'Comedy',
likes: 4,
dislikes: 1
}, 

{
id: '2',
title: 'Midnight Sun',
image:' https://i.ibb.co/sCZSNnv/3524235.jpg',
category: 'Comedy',
likes: 2,
dislikes: 0
}, {
id: '3',
title: 'Les indestructibles 2',
image: 'https://i.ibb.co/M2d5Fnp/923701.jpg',
category: 'Animation',
likes: 3,
dislikes: 1
},
]

Answer 1

根据我的理解，您需要唯一投票

const [likeCount setLike] = useState(likes);
const [dislikeCount, setDislike] = useState(dislikes);
const [likeState, setLikeState] = useState(false)
const [dislikeState, setDislikeState] = useState(false)
const [vote, setVote] = useState(false)
const [isLike, setIsLike] = useState(0);
const [isDislike, setIsDislike] = useState(0);

const likeMovie = () => {
if(!vote && !likeState) { 
setLike(likeCount + 1);
setLikeState(true)
setVote(true)
}
if(vote && likeState) {  
setLike(likeCount - 1);
setLikeState(false)
setVote(false)
}

} 
const dislikeMovie = () => {
if(!vote && !dislikeState) {

setDislike(dislikeCount - 1);
setDislikeState(true)
setVote(true)
}
if(vote && dislikeState) {   
setDislike(dislikeCount + 1);
setDislikeState(false)
setVote(false)
}

}

然后

<div>
<i onClick={likeMovie} class="far fa-thumbs-up"></i>
<h5>{likeCount}</h5>
</div>

<div>
<i onClick={dislikeMovie} class="far fa-thumbs-down"></i>
<h5>{dislikeCount}</h5>
</div>