[英]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.