React.js and Next.js : TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))

Question

I can't acces state's values with [...state_name,{}].

I can't solve this problem. I'm trying to set this algorithm for dynamic menu. I'm getting values from useFetch method's List action.

I can get values , its working correctly. Its getting values from json server.

import {useState } from "react";
import useFetch from "../functions/useFetch";

const MenuCreator = () => {
    const [menu,setMenu] = useState([]);
    const {data} = useFetch('LIST','/menuler');
    const [subMenu,setSubMenu] = useState([]);
    
    for(let i in data) 
    {
        if(data[i].main_menu == null){
            for(let s in data){
                if(data[s].main_menu == data[i].id)
                    setSubMenu([...subMenu,{id:data[s].id,menu_adi:data[s].menu_adi,main_menu:data[s].main_menu,menu_link:data[s].menu_link}]);
            }
            setMenu([...menu,{
                id:data[i].id,
                menu_adi:data[i].menu_adi,
                menu_icon:data[i].menu_icon,
                menu_link:data[i].menu_link,
                subMenus:subMenu
            }]);
            setSubMenu(null);
        }
    }
    console.log(menu);
    return {menu};
}
 
export default MenuCreator;

Photo for error :

error photo here

useFetch.js for this solution:

import { useEffect, useState } from 'react';
import {URL} from '../config/conf';
const useFetch = (type,url) => {
    if(url === undefined)
        url = "/";

    const [data,setData] = useState(null);
    const [loading,setLoading] = useState(true);
    const [error,setError] = useState(null);
    switch(type){
        case "ADD":
                fetch(`${URL+url}`,{
                    method:"POST",
                    headers:{"Content-Type":"application/json"},
                    body:JSON.stringify(data)
                }
                ).then(()=>{
                    setData("success");
                    setLoading(false);
                })
            break;
        case "DELETE":
                fetch(`${URL+url}`,
                {
                    method:"DELETE"
                }).then(()=>{
                    setData("success");
                    setLoading(false);
                })
            break;
        case "UPDATE":
            break;
        case "LIST":
            useEffect(()=>{
                fetch(`${URL}${url}`).then(res=>{
                    if(!res.ok) throw Error("Veriler Getirilirken Bir Hata Oluştu");
                    return res.json();
                }).then(data=>{
                    setData(data);
                    setLoading(false);
                }).catch(err=>{
                    setError(err.message);
                    setLoading(false);
                })
            },[url])
            break;
    }
    
    return {data,loading,error};
}
 
export default useFetch;

You probably need to setSubMenu([]); to reset your submenu. That is use an empty array (which is iterable) rather than null — tromgy
– tromgy, Commented Sep 5, 2022 at 13:40

Simas.B · Accepted Answer · 2022-09-05 14:23:26Z

1

You're setting subMenu to null at the end of the first iteration, i'm not sure about the logic of it, but setting subMenu to empty array instead of null should fix this error, setSubMenu([]). Also it's recommended to use prevState to map values to existsing state:

setSubMenu((prevState) => [
  ...prevState,
  { id: 'new element' },
]);

edited Sep 5, 2022 at 14:23

answered Sep 5, 2022 at 14:16

Simas.B

7531 gold badge14 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ninsau · Accepted Answer · 2022-09-05 17:10:55Z

0

The issue is from setSubMenu(null);. You need to set it to an empty array instead setSubMenu([]);, since null is not iterable from how you're using it

answered Sep 5, 2022 at 17:10

ninsau

1,0362 gold badges13 silver badges31 bronze badges

Collectives™ on Stack Overflow

React.js and Next.js : TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related