Question

所以我正在尝试制作一个屏幕，其中使用来自用户本地存储的数据（我们称之为 var1），但出现 Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 错误。我想要做的是检查来自用户本地存储的数据是否存在，如果存在，那么它将将该数据放入一个状态，但首先它将从本地存储中获取另一个变量（用户身份验证令牌，我们称之为 var2）并放入它进入 var1 中的每个对象（var1 是一个包含对象的列表），这是使用 map 完成的，然后使用身份验证令牌（或 var2）将状态设置为已更改的 var1，然后返回一些 HTML 并使用一些逻辑HTML，对于 var1 中的每个对象，它将创建一个新的 select 标记，数字范围从 1 到 20，这是通过映射一个包含 20 个数字的数组来完成的（我这样做是因为我无法让 for 循环正常工作）和如果选择标记中的当前选项数与 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>
                )
            }
        })}
        })}
    )
}

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

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

错误：重新渲染过多。 React 限制渲染次数以防止无限循环。 - 反应

2 个答案: