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

Question

So I'm trying to make a screen where data from user's localstorage is used (Lets call it var1) but I'm getting 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. error. What I'm trying to do is check if the data from user's localstorage exists and if it does then it will put that data into a state but first it will grab another variable from localstorage (User auth token, lets call it var2) and put 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, For every object in var1 it will create a new select tag with numbers ranging from 1 to 20 and this is done using mapping an array with 20 numbers (I'm doing this because I could not get for loop to work properly) and if the current number of option in select tag matches a key value 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 the value of quantity to whatever the user selected on select tag. I tried to cut down and simplify my code as much as I could. My code is like this:

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

Your render calls setvar1 which in turn trigger's a re-render. You should put this whole logic inside a useEffect hook:

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

This is what you have to do is to avoid logic in your render function. For that case, we do have useEffect function plus on top of that you may add useMemo;