錯誤：重新渲染過多。 React 限制了渲染的數量以防止無限循環。 - 反應

Question

所以我正在嘗試制作一個使用來自用戶本地存儲的數據的屏幕（讓我們稱之為 var1），但我收到Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 錯誤。 我要做的是檢查來自用戶本地存儲的數據是否存在，如果存在，那么它將將該數據放入 state 但首先它將從本地存儲中獲取另一個變量（用戶身份驗證令牌，我們稱之為 var2）並放入it into every object in var1 (var1 is a list which contains objects) and this is done using map then the state is set to the changed var1 with the auth token(or var2), then it returns some HTML and some logic is used in HTML，對於 var1 中的每個 object，它將創建一個新的 select 標記，其數字范圍為 1 到 20，並且使用映射一個具有 20 個數字的數組無法正確執行此操作，因為我無法執行此循環到我的工作）如果 select 標簽中的當前選項數與鍵 va 匹配 lue pair in one of var1's object then it will select the option tag or put selected attribute on option tag and if you change the value of select tag then it will trigger a function which will map through var1 and select the object which user requested and change數量值是用戶在 select 標簽上選擇的任何值。 我試圖盡可能地減少和簡化我的代碼。 我的代碼是這樣的：

function RandomScreen() {
    const [var1, setvar1] = useState([])
    let localstoragevar = JSON.parse(localStorage.getItem('var'))
    let newCart = []
    if (localstoragevar) {
        localstoragevar.map(item => {
            item.authtoken = localStorage.getItem('AuthToken')
            newCart.push(item)
        })
    }
    setvar1(newCart)
    let twenty = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
    return (
        {var1.map(newItem => {
        {/* HTML code goes here */}
            {twenty.map(number => {
            if (number == item.quantity) {
                return (
                    <option onChange={handleClick} selected name={newItem.id} value={newItem.quantity}>{newItem.quantity}</option>
                )
            } else {
                return (
                    <option onChange={handleClick} name={newItem.id} value={number}>{number}</option>
                )
            }
        })}
        })}
    )
}

Answer 1

您的渲染調用setvar1進而觸發重新渲染。 您應該將整個邏輯放在useEffect掛鈎中：

useEffect(() => {
    let localstoragevar = JSON.parse(localStorage.getItem('var'))
    let newCart = []
    if (localstoragevar) {
        localstoragevar.map(item => {
            item.authtoken = localStorage.getItem('AuthToken')
            newCart.push(item)
        })
    }
    setvar1(newCart)
}, []);

Answer 2

這就是您要做的就是避免渲染 function 中的邏輯。 對於這種情況，我們確實有 useEffect function 加上您可以添加 useMemo；