使用更新的 API 数据（来自 UseEffect）来更新另一个状态值

Question

我有一个应用程序使用 UseEffect 挂钩从 API 获取电影信息作为数组并将响应存储在状态 (movies) 中，我也有一个函数 (getIndexMovie)，它从存储的电影数组中获取随机电影对象，并将返回的对象存储在另一个状态 (selectedMovie)。我想在页面加载时显示随机电影信息，我该如何实现？

我试过这个：

const [movies, setMovies] = useState<TrendingMovieResultModel[]>([]);
const [selectedMovie, setSelectedMovie] = useState<SelectedMovieModel>({
    "backdrop_path": "",
    "title": "",
    "original_language": "",
    "original_title": "",
    "poster_path": "",
    "video": false,
    "vote_average": 0,
    "vote_count": 0,
    "overview": "",
    "release_date": "",
    "id": 0
  });

 useEffect(() => {
    fetch(`${baseUrl}trending/all/day?api_key=${API_KEY}`)
    .then(response => response.json())
    .then(data => {
      setMovies(data.results);        
    }).catch(err => console.log(err));

  }, []);  

  const getRand = (max: number) => {
    return Math.floor(Math.random() * max);
  }

//where can i call this function ?
  const getIndexMovie = () => {
    const randomIndex = getRand(movies.length);
    const { 
            title, backdrop_path, original_language,  original_title, poster_path, 
            video, vote_average, vote_count, overview, release_date,
            id 
          } = movies[randomIndex];

    setSelectedMovie({ backdrop_path, title, original_language, original_title,
      poster_path, video, vote_average, vote_count, overview, release_date, id
    });
}

Answer 1

您可以将它添加到您的 useEffect 挂钩中。

useEffect(() => {
    fetch(`${baseUrl}trending/all/day?api_key=${API_KEY}`)
    .then(response => response.json())
    .then(data => {
      setMovies(data.results);
      const randIndex = getRand(data.results.length);
      setSelectedMovie(data.results[randIndex]);       
    }).catch(err => console.log(err));

  }, []);

使用更新的 API 数据（来自 UseEffect）来更新另一个状态值

Use Updated API data(From UseEffect) to Update Another State Value

api

typescript

reactjs

use-effect