在另一个函数之前强制 setState

Posted 2023-02-22

【中文标题】在另一个函数之前强制 setState

【英文标题】：Force setState before another function

【发布时间】：2021-10-08 19:52:32

【问题描述】：

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

  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([]));
    
  

【参考方案1】：

使用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]);

如果您希望每次通过 setSearchMovie 更改 searchedMovie 时都运行此功能，您甚至可以将此挂钩集成到 MoviesContextProvider（我假设您使用 useState 进行这些操作）

【讨论】：

这行得通，谢谢！我认为我应该使用 useEffect() 虽然我没有得到组件的哪个部分来做它