[英]Refactoring a class based component to a Functional component
TL;DR:我正在尝试将基于类的 App 组件重构为功能组件,并且使用 useEffect Hook 获得了一些意想不到的结果。
我对 React 和我的应用程序版本相当陌生,使用 OMDB API 搜索电影是基于 class 的版本。 它运行良好,所以我想在进入 redux 之前多练习使用钩子和上下文。
在我的 class 组件中,我有以下代码:
componentDidMount = () => {
window.onscroll = this.handleScroll;
};
handleScroll = () => {
if (!this.state.movies.loading) {
if (getScrollDownPercentage(window) > 0.8) {
const nextPage = this.state.movies.page + 1;
this.searchMovies(this.state.movies.searchValue, nextPage);
this.setState({
...this.state,
movies: {
...this.state.movies,
page: nextPage,
},
});
}
}
};
searchMovies = (str, page = 1) => {
const existingMovies =
this.state.movies.data.length && this.state.movies.searchValue === str
? this.state.movies.data
: [];
this.setState({
...this.state,
movies: {
...this.state.movies,
loading: true,
},
});
axios
.get(`${process.env.REACT_APP_ENDPOINT}s=${str}&page=${page}`)
.then((response) => {
if (response.data.Response === "True") {
this.setState({
...this.state,
movies: {
...this.state.movies,
loading: false,
searchValue: str,
data: [...existingMovies, ...response.data.Search],
},
});
}
});
};
在重构之后,我的代码感觉不太干净(所以与我希望实现的相反)
当我到达页面末尾的那一刻,我得到一个不停的 axios 调用的 stream 调用在第 2 页和第 3 页之间切换
如果我没记错的话,它不起作用,因为 setState 正在异步运行,并且我的页面上不断更新。
useEffect(() => {
window.onscroll = () => {
handleScroll();
};
if (searchValue) {
console.log(page);
searchMovies(searchValue, page);
}
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [searchValue, page]);
const handleScroll = () => {
if (!loading && searchValue) {
if (getScrollDownPercentage(window) > 0.7) {
setState({
...state,
movies: {
...state.movies,
page: page + 1,
},
});
}
}
};
const searchMovies = (str, page = 1) => {
const existingMovies = data.length && prevSearchValue === str ? data : [];
setState({
...state,
movies: {
...state.movies,
loading: true,
},
});
axios
.get(`${process.env.REACT_APP_ENDPOINT2}s=${str}&page=${page}`)
.then((response) => {
if (response.data.Response === "True") {
setState({
...state,
movies: {
...state.movies,
loading: false,
searchValue: str,
data: [...existingMovies, ...response.data.Search],
},
});
} else {
setState({
...state,
movies: {
...state.movies,
loading: false,
error: true,
},
});
}
});
};
我希望我包括所有内容(也不要太多)以明确我的问题。 寻找一些 React 向导。
编辑:指定问题多一点,并用粗体表示
鉴于您的回复,我认为您想要执行多个useEffects
:一个用于 searchMovies,另一个用于滚动设置。
useEffect(() => {
window.onscroll = () => {
handleScroll();
};
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
useEffect(() => {
if (searchValue) {
console.log(page);
searchMovies(searchValue, page);
}
}, [searchValue, page])
快速修复将使用空数组作为第二个参数以避免无限循环
useEffect(() => {
//your code
},[]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.