如何获得我的星评级组件设置从1-5的ratingValue

Question

我建立了一个电影评级应用程序，当你点击一个星星时，它会发送一个放置请求来改变星星的值

import axios from "axios";
import React, { useState } from "react";
import { FaStar } from "react-icons/fa";
const StarRating = (props) => {
const [rating, setRating] = useState(props.rating);
const starSwitch = (id) => {
setRating(rating + 1);
axios
.put(`https://cjb-bbreviews.herokuapp.com/movie/${id}`, {
ratingValue: rating,
})
.then((response) => {
setRating;
console.log("success", response);
});
};
return (
<div>
{[...Array(5)].map((star, i) => {
const ratingValue = i + 1;
return (
<label>
<input
type='radio'
name='rating'
value={ratingValue}
onClick={() => starSwitch(props.movie_id)}
onMouseOver={() => setHover(ratingValue)}
onMouseOut={() => setHover(null)}
/>
<FaStar
className='star'
color={ratingValue <= rating ? "#ffc107" : "#e4e5e9"}
/>
</label>
);
})}
</div>
);
};
export default StarRating;
name='rating'
value={ratingValue}
onClick={() => starSwitch(props.movie_id, ratingValue)}
onMouseOver={() => setHover(ratingValue)}
onMouseOut={() => setHover(null)}
/>
<FaStar
className='star'
color={ratingValue <= rating ? "#ffc107" : "#e4e5e9"}
/>
</label>
);
})}
</div>
);
};
export default StarRating;

当我点击星号时，它就会增加为1。每次星号而不是设置我按下的星号值。而且悬停效果也不起作用。

Answer 1

这是因为在starSwitch中，您只需将评级增加1:

setRating(rating + 1);

你需要让你的onClick函数知道新的等级:

const starSwitch = (r, id) => {
setRating(r);
// Send PUT request
};

在你的输入中:

onClick={() => starSwitch(ratingValue, props.movie_id)}

希望有帮助。