如何将api值传递给useState作为其初始值?

Question

我已经学习了一个星期了，现在我遇到了一个问题，我想将值传递给useState，然后使用该值作为我的评级组件的默认值。请参阅下面的代码:

const Produts = () =>{
const classes = useStyles();
const [movieData, setMovieData] = useState([
//the below is an fake api data which needs to be deleted 
{
"adult": false,
"backdrop_path": "/7RyHsO4yDXtBv1zUU3mTpHeQ0d5.jpg",
"genre_ids": [
12,
878,
28
],
"id": 299534,
"original_language": "en",
"original_title": "Avengers: Endgame",
"overview": "After the devastating events of Avengers: Infinity War, the universe is in ruins due to the efforts of the Mad Titan, Thanos. With the help of remaining allies, the Avengers must assemble once more in order to undo Thanos' actions and restore order to the universe once and for all, no matter what consequences may be in store.",
"popularity": 326.894,
"poster_path": "/or06FN3Dka5tukK1e9sl16pB3iy.jpg",
"release_date": "2019-04-24",
"title": "Avengers: Endgame",
"video": false,
"vote_average": 8.3,
"vote_count": 18957
},

]);

//这里我试图将vote_average值传递给useState作为其初始值。

const ratings = (movieData.vote_average);
const [ratingValue, setRatingValue] = useState(ratings );

//最后我使用地图函数返回它在评级组件

return (
<> 
<div className={classes.main}> 
{movieData.map((movie) =>{
return(
<Card className={classes.cardMain} key={movie.id}>
<CardActionArea>
<CardMedia className = {classes.cardImage}>
<img style = {{width: '100%', height: '100%', objectFit: 'cover'}} 
src ={`https://image.tmdb.org/t/p/original${movie.poster_path}`} 
alt = "movie poster"/>
</CardMedia>
<CardContent className = {classes.cardContent}>
<Typography>  {movie.original_title} </Typography>
<Typography 
className = {classes.typography1} 
variant="body2" 
component = "p"
> {movie.release_date} 
</Typography>
<Rating 
className = {classes.typography2} 
name = "ratings"
value = {ratingValue}
*//here am trying to render/return that vote_average value and then change when user clicks or selects*

onChange = {(event, newRating) => {
setRatingValue(newRating);
}}
/>  
</CardContent>
</CardActionArea>
<CardActions >
<Button className = {classes.cardButton} >Watch</Button>
<Button className = {classes.cardButton}>Like</Button>
<Button className = {classes.cardButton}>Rent</Button>
</CardActions>
</Card>
);

})}

</div>


</>
)
};
export default Produts;

谁能让我知道我能做什么，怎么做?提前万分感谢。

请查看我正在尝试使用示例组件引用此文档https://material-ui.com/components/rating/评级

Answer 1

您不需要为评级创建单独的钩子(useState)，因为您的movieData是一个数组，因此您需要使用useState更改movieData数组中的直接值。你可以这样修改你的组件。

let tempMovieData ={…movieData};比;扩展操作符用于复制对象值并赋值给变量。

<Rating 
className = {classes.typography2} 
name = "ratings"
value ={movieData.vote_average}
onChange = {(event, newRating) => {
let tempMovieData = {...movieData};
tempMovieData.vote_average = newRating;
setMovieData(tempMovieData);
}}
/>