我對 React 比較陌生，但我一直在使用 useEffect 從加載頁面時從資料庫中獲取所有新聞和事件。我最近嘗試實作一個加載微調器，現在我似乎遇到了一個無限回圈，但我不明白為什么。我在依賴陣列中有新聞和事件，因為如果它們發生變化，那么我們需要更新向用戶顯示的內容。我能看到的唯一潛在問題是我正在我的狀態存盤中的操作中構建新聞和事件陣列，但在嘗試實作此功能之前，我似乎沒有遇到過這個問題。它可能是愚蠢的，但有人可以幫助我嗎？
前端代碼：
export default observer(function NewsAndEvents() {
const { generalStore } = useStore();
const { getNewsAndEvents, events, news, loading } = generalStore
useEffect(() => {
getNewsAndEvents();
}, [news, events]);
return (
<main id="newsAndEvents">
<div className="infoContainer">
<h1>News</h1>
{ loading ? <LoadingSpinner /> : news.map((news, index) => {
return <News key={`news_${index}`} title={news.title} content={news.content} />
})}
</div>
獲取操作：
export default class GeneralStore {
isAuthenticated: boolean = false;
selectedEvent: Event | undefined = undefined;
events: Event[] = [];
selectedNews: News | undefined = undefined;
news: News[] = [];
loading: boolean = false;
constructor() {
makeAutoObservable(this);
}
getNewsAndEvents = async () => {
this.loading = true;
try {
let response: any = await agent.newsAndEvents.list();
if (response !== null) {
runInAction(() => {
this.events = [];
this.news = [];
response.events.forEach((item: any) => {
let newEvent: Event = {
id: item._id,
date_time: item.date_time,
name: item.name,
description: item.description,
price: item.price,
type: ContentType.event,
};
this.events.push(newEvent);
});
response.news.forEach((item: any) => {
let newNews: News = {
id: item._id,
title: item.title,
content: item.content,
type: ContentType.news,
};
this.news.push(newNews);
});
this.setLoading(false);
});
}
} catch (ex) {
console.log(ex);
this.setLoading(false);
}
};
}
我正在使用 TS 和 MobX。
uj5u.com熱心網友回復：
如果您的getNewsAndEvents()函式正在更新news或events，您的 useEffect 將無限運行。您需要創建一個標志來防止這種情況發生。
const [flag, setFlag] = useState(true);
useEffect(() => {
if (flag) {
getNewsAndEvents();
setFlag(false);
}
}, [flag]);
理想情況下，flag 也應該是一個全域狀態，但我在這里使用了 useState，因為我不熟悉 mobx。
然后每次要getNewsAndEvents()運行時，都可以將標志設定為true。
uj5u.com熱心網友回復：
我認為問題是當加載結束時，它的值（true）保持不變，因為加載不是組件狀態，所以如果加載結束，組件將不會被重新渲染，所以為了解決這個問題，我建議你把加載值在使用 useState 鉤子的狀態下：
const [loading, setLoading] = useState(generalStore.loading);
然后您將添加一個具有 [generalStore.loading] 依賴項的 useEffect 以便在加載值更改后更新狀態，這將使組件重新渲染：
useEffect(() => {
setLoading(generalStore.loading);
}, [generalStore.loading]);
我不確定這個解決方案是否適合你，但我認為它值得一試。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/375614.html
上一篇：沒有檢測到正確的型別