javascript - 在另一个函数之前强制 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([]));
}
}
解决方案
使用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
这些),您甚至可以将此挂钩集成到
推荐阅读
- r - 抑制输出,在 R markdown 中保持 pander 和绘图
- javascript - Res.download() 使用 html 表单提交但不是 Axios 后调用
- php - 无法在 MACOSX 上启动 MAMP
- spring-security-oauth2 - 如何使用 oauth2 在 Spring 应用程序中创建 WebClient 对象
- javascript - [@angular/compiler 和 @angular/core] 中的 Ionic 3 到 4 升级构建错误
- python - 为什么 cv2.resize() 不适用于整数数组?
- jenkins - Jenkins Pipelines 下载工具
- python - 有没有办法在一个圆圈周围(或内部)旋转文本?
- python - 使用 wxPython + pymupdf 抗锯齿渲染的 PDF
- ionic-framework - 带有cordova-plugin-ionic-keyboard的工具栏按钮是否存在?