我撰寫了一個 Chrome 擴展程式。popup.html 在 React 中的實作如下：
const [blogUrls, setblogUrls] = useState<string[]>([]);
useEffect(() => {
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
const newBlogUrls = [...blogUrls, ...request.param.blogUrls];
setblogUrls(newBlogUrls);
return true;
});
}, [blogUrls]);
如何避免無限回圈？
[blogUrls]我知道即使我寫了也寫不好setblogUrls(newBlogUrls)。
但我想像這樣寫[...blogUrls,。
請告訴我如何解決這個矛盾。
uj5u.com熱心網友回復：
試試這個 -
useEffect(() => {
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
const newBlogUrls = [...blogUrls, ...request.param.blogUrls];
setblogUrls(newBlogUrls);
return true;
});
return () => chrome.runtime.onMessage.removeEventListener();
}, []);
它將在頁面渲染后執行一次。在 useEffect 本身內呈現頁面后，您的依賴 blogUrls 正在發生變化。所以 useEffect 一次又一次地呼叫自己。因此，它創建了無限回圈。要渲染一次，只需確保它應該是 useEffect 中的空依賴項。
uj5u.com熱心網友回復：
- 您的代碼在每個渲染上添加一個偵聽器。
// runs on every render
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
- 將偵聽器洗掉為 -
const [blogUrls, setblogUrls] = useState<string[]>([]);
function onBlogUrlsChanged(request) {
const newBlogUrls = [...blogUrls, ...request.param.blogUrls];
setblogUrls(newBlogUrls);
}
useEffect(() => {
chrome.runtime.onConnect.addListener(onBlogUrlsChanged);
return () => {
chrome.runtime.onConnect.removeListener(onBlogUrlsChanged);
}
}, []);
useEffect傳引數只運行一次就可以了[]，我們不會在每次重新渲染組件時都浪費地附加和分離監聽器。
uj5u.com熱心網友回復：
你可以做這樣的事情
useEffect(() => {
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
setblogUrls((v) => [...v, ...request.param.blogUrls]);
return true;
});
// Don't forget to clean the listener
return () => chrome.runtime.onMessage.removeEventListener()
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/472695.html
標籤：反应
上一篇：如何將MaterialUI包添加到React應用程式
下一篇：使輸入樣式表現得像h1樣式