错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。 - 反应答案

【问题标题】：Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. - React错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。 - 反应
【发布时间】：2021-07-16 20:45:33
【问题描述】：

所以我正在尝试制作一个使用来自用户本地存储的数据的屏幕（我们称之为 var1），但我收到了Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 错误。我要做的是检查来自用户本地存储的数据是否存在，如果存在，那么它将将该数据置于一个状态，但首先它将从本地存储中获取另一个变量（用户身份验证令牌，我们称之为 var2）并放入它进入 var1 中的每个对象（var1 是一个包含对象的列表），这是使用 map 完成的，然后使用 auth 令牌（或 var2）将状态设置为更改后的 var1，然后它返回一些 HTML 并使用一些逻辑HTML，对于 var1 中的每个对象，它将创建一个新的选择标签，其数字范围为 1 到 20，这是通过映射一个包含 20 个数字的数组来完成的（我这样做是因为我无法让 for 循环正常工作）和如果 select 标记中的当前选项数与 var1 对象之一中的键值对匹配，则它将选择选项标签或将所选属性放在选项标签上，如果您更改选择标签的值，那么它将触发一个函数，该函数将通过 var1 映射并选择用户请求的对象并将数量的值更改为用户选择的任何值选择标签。我试图尽可能地减少和简化我的代码。我的代码是这样的：

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>
                )
            }
        })}
        })}
    )
}

【问题讨论】：

您不会在组件的顶层调用setvar1(newCart)。它会导致无限的重新渲染。将其放在useEffect 或事件处理程序中。
将 useState 和 return 之间的所有内容放在一个 useEffect 挂钩中，并带有一个空的依赖数组。

标签： javascript reactjs

【解决方案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)
}, []);

【讨论】：

【解决方案2】：

这就是你要做的就是避免渲染函数中的逻辑。对于这种情况，我们确实有 useEffect 功能，此外您还可以添加 useMemo；

【讨论】：