Question

我点击电影时看不到其信息

2022-03-07

51

reactjs

我希望在点击电影时查看电影信息，但它只显示热门电影的信息，而不是我通过输入搜索的电影的信息。换句话说，在 URL 中我看到我在电影中，但它什么也没显示。

我试了一整天，但什么都没用。

useHomeFetch.js

  const [movies, setMovies] = useState([]);
  const [searchMovie, setSearchMovie] = useState('');

  const getPopular = async () => {
    const res = await fetch(POPULAR);
    const data = await res.json();
    setMovies(data.results);
  };

  useEffect(() => {
    getPopular();
  }, []);

  const getSearch = async () => {
    const res = await fetch(SEARCH + searchMovie);
    const data = await res.json();

    if (data.results) {
      setMovies(data.results);
    } else {
      getPopular();
    }
  };

  useEffect(() => {
    getSearch(searchMovie);
  }, [searchMovie]);

  return { movies, searchMovie, setSearchMovie };
};

Home.js

  const mov = useHomeFetch();

  return (
    <div>
      <Search searchMovie={mov.searchMovie} setSearchMovie={mov.setSearchMovie}/>
      <div className="movie--container">
        {mov.movies.map((movie) => (
          <Link to={'/' + movie.id}>
            <div className="image-container" key={movie.id}>
              <img
                className="movie--poster"
                src={movie.poster_path === null ? NoImage : IMAGE + movie.poster_path}
                alt={movie.title}
              />
              <h3 className="title">{movie.title}</h3>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default Home;

MovieInfo.js

const MovieInfo = () => {
  const mov = useHomeFetch();
  const params = useParams();

  const infoMovie = mov.movies.find((movie) => movie.id === parseInt(params.movieId));

  let info= '';

  if (infoMovie) {
    info = infoMovie.overview;
  }

  return (
    <div>
      <h3>{info}</h3>
    </div>
  );
};

export default MovieInfo;

Answer 1

从表面上看，问题与您的 MovieInfo.js 文件有关。您需要利用 useEffect 之类的钩子来处理数据，而不是在组件主体内部处理数据。每当发生任何变化时，这只会导致不必要的重新渲染。

您还需要包含一些在尝试查找电影时渲染的内容，因为它可能没有您想要的那么快。在我的示例中，我包含了一个加载字符串，您只有在找到电影后才能看到它。

import {useEffect, useState} from 'react';

const MovieInfo = () => {
  const mov = useHomeFetch();
  const params = useParams();
  const [info, setInfo] = useState()

  useEffect(() => {
    const infoMovie = mov.movies.find((movie) => movie.id === parseInt(params.movieId));
    if(infoMovie) {
      setInfo(infoMovie);
    }
  }, [mov, params.movieId])

  if(!info) {
    return 'Loading...';
  }

  return (
    <div>
      <h3>{info}</h3>
    </div>
  );
};

export default MovieInfo;

PS。我认为您可能将所有内容都放在 useHomeFetch 钩子中，从而使您的应用程序过于复杂，您应该再次查看 React 组件的生命周期如何工作，以便您只在需要时进行渲染。