首页 > 解决方案 > 在另一个函数之前强制 setState

问题描述

如何在调用函数setSearchedMovie之前强制完成?fetchSearchedMovie(searchedMovie)


  const { updateMovies, searchedMovie, setSearchedMovie } = useContext(MoviesContext); 

  const fetchMoviesList = (event: any) => {
    const searchedMovieValue = event.target.value;
    setSearchedMovie(searchedMovieValue);

    if (searchedMovie) {
      fetchSearchedMovie(searchedMovie)
        .then((res) => updateMovies(res))
        .catch(() => updateMovies([]));
    } else {
      fetchMovies()
        .then((res) => updateMovies(res))
        .catch(() => updateMovies([]));
    }
  }

标签: javascriptreactjstypescriptstate

解决方案


使用useEffect钩子:

const { updateMovies, searchedMovie, setSearchedMovie } = useContext(MoviesContext); 

const fetchMoviesList = (event: any) => {
    const searchedMovieValue = event.target.value;
    setSearchedMovie(searchedMovieValue);
}

useEffect(()=>{
    if (searchedMovie) {
      fetchSearchedMovie(searchedMovie)
        .then((res) => updateMovies(res))
        .catch(() => updateMovies([]));
    } else {
      fetchMovies()
        .then((res) => updateMovies(res))
        .catch(() => updateMovies([]));
    }
}, [searchedMovie, fetchSearchedMovie, fetchMovies, updateMovies]);

MoviesContextProvider如果您希望每次更改 searchedMovie 时都运行此功能setSearchMovie(我假设您正在使用useState这些),您甚至可以将此挂钩集成到


推荐阅读