Question

我正在使用 setClickedMovieId 事件触发 onClick。我还使用 useEffect 来检查 state 的值是否设置正确，但是，它会输出默认值（零）。

我需要保存被点击项目的 ID，以便能够在 <NavLink to={"movie/" + clickedMovieId}> 使用它。

const MovieCards = () =>  {
  const { movies } = useContext(MoviesContext);  
  
  const [clickedMovieId, setClickedMovieId] = useState<number>(0);

  useEffect(() => {
    console.log('Current value of movie id state', clickedMovieId);
  }, [clickedMovieId]);

return (
    <div >
      <Grid container spacing={1}>
      {movies.map((movie) => (
        <Grid item xs={6} sm={2} key={movie.id}>
          <NavLink to={"movie/" + clickedMovieId}>
            <Card className="card">
              <CardActionArea>
                <CardMedia
                  component="img"
                />
              </CardActionArea>
              <CardActions>
                <Button size="small" color="primary">
                  <FavoriteBorderIcon />
                </Button>
                <Button size="small" color="primary" onClick={() => setClickedMovieId(movie.id)}>
                  {movie.rating}
                </Button>
              </CardActions>
            </Card>
          </NavLink>
        </Grid>
      ))}
      </Grid>
    </div>
  );
}

export default MovieCards;

我该如何解决？

谢谢！

Answer 1

解决办法： <NavLink to={"movie/" + movie.id}>

setState 钩子不设置值

1 个答案: