Блог

Я изучаю react уже неделю, и я столкнулся с проблемой, когда я хочу передать значение в 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 для использования в качестве его начального значения.

  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

Вам не нужно создавать отдельные крючки(useState) для оценки, потому что ваши данные movieData являются массивом, поэтому вам нужно изменить прямое значение в массиве данных movieData с помощью useState. Вы можете изменить свой компонент следующим образом.

пусть tempMovieData = {…movieData}; > Оператор распространения используется для копирования значения объекта и указания в переменную.

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