首頁猿問盡管數組為空，但 React...

盡管數組為空，但 React useEffect 無限循環

JavaScript

至尊寶的傳說 2023-10-14 10:04:59

我有一個反應鉤子。該鉤子具有子鉤子，子鉤子在生成時會為自己生成一個 ID。該 ID 始終是唯一的，因為每次創建新的子鉤子時它都會加 1。const App = () => { const [ idCounter, setIdCounter ] = React.useState(0); const genId = () => { setIdCounter( id => id + 1 ); return `ID-${idCounter}`; } const SomeComponent = () => { const [ componentId, setComponentId ] = React.useState(null); React.useEffect(() => { let generatedId = genId(); setComponentId( id => generatedId ); console.log(`generated '${generatedId}'`) }, []); return <div>nothing works</div> } return <SomeComponent />};這會一遍又一遍地循環并記錄生成的 id。它到底為什么要這么做？useEffect()依賴于...什么都沒有??！它應該只運行一次，不是嗎？我怎樣才能避免這種情況發生？我希望將來能夠SomeComponent從內部創建一些。App

查看完整描述

2 回答

守著一只汪

TA貢獻1872條經驗獲得超4個贊

首先，首先，

我希望將來能夠從應用程序內創建多個 SomeComponent 。

在使用 React 時，這（至少是你這樣做的方式）是不可能的或根本不應該做的。您不能在另一個組件內創建一個組件。

目前，您陷入無限循環的原因useEffect可能有多種?？赡芩鼪]有位于最高范圍，但我的猜測是發生以下情況：

genId()被調用，狀態被更新，重新渲染被初始化（因為狀態更新），并const SomeComponent = () => {...}再次初始化，從而useEffect再次激活。

要解決這個問題，首先要從內部創建的事物中刪除<SomeComponent /><App />它們，它們應該完全分開。其次，將該genId函數作為prop傳遞，并將其添加到useEffect依賴項列表中，因為您需要它。

這將是一個很好的開始，因為現在代碼在語義上和規則上都是正確的。

const SomeComponent = ({ genId }) => {

? const [ componentId, setComponentId ] = React.useState(null);

? ??

? React.useEffect(() => {

? ? let generatedId = genId();

? ? setComponentId(generatedId);

? ? console.log(`generated '${generatedId}'`)

? }, [genId]);

? ??

? return <div>nothing works</div>

}

const App = () => {

? const [ idCounter, setIdCounter ] = React.useState(0);

? const genId = () => {

? ? setIdCounter( id => id + 1 );

? ? return `ID-${idCounter}`;

? }

? return <SomeComponent genId={genId} />

};

反對回復 2023-10-14

慕尼黑8549860

TA貢獻1818條經驗獲得超11個贊

我不會回答這個問題，只是指出子組件有一些缺點。你的子組件幾乎不可能進行單元測試。也許您可以將其移至頂級組件并接受generatedId作為道具

const SomeComponent = ({generatedId}) => {

const [ componentId, setComponentId ] = React.useState(null);

React.useEffect(() => {

setComponentId( id => generatedId );

console.log(`generated '${generatedId}'`)

}, []);

return <div>nothing works</div>

}

const App = () => {

const [ idCounter, setIdCounter ] = React.useState(0);

const genId = () => {

setIdCounter( id => id + 1 );

return `ID-${idCounter}`;

}

return <SomeComponent generatedId={genId()}/>

};

反對回復 2023-10-14

2 回答
0 關注
151 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

盡管數組為空，但 React useEffect 無限循環

盡管數組為空，但 React useEffect 無限循環

2 回答

添加回答

盡管數組為空，但 React useEffect 無限循環

盡管數組為空，但 React useEffect 無限循環