时间戳

首页 > 解决方案 > 如何将 api 值传递给 useState 作为其初始值？

javascript - 如何将 api 值传递给 useState 作为其初始值？

问题描述

我从一个星期以来一直在学习反应，我遇到了一个问题，我想将值传递给 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/#rating参考此文档

标签： javascriptreactjsmern

解决方案

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

让 tempMovieData = {...movi​​eData}; > 扩展运算符用于复制对象值并分配给变量。

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

推荐阅读