开发者问题收集

React.js 和 Next.js:TypeError:对象 null 不可迭代(无法读取属性 Symbol(Symbol.iterator))

2022-09-05
1536

我无法使用 [...state_name,{}] 访问状态的值。

我无法解决这个问题。我正在尝试为动态菜单设置此算法。我从 useFetch 方法的 List 操作中获取值。

我可以获取值,它工作正常。它从 json 服务器获取值。

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;

错误照片:

错误照片在这里

此解决方案的 useFetch.js:

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;
2个回答

您在第一次迭代结束时将 subMenu 设置为 null,我不确定它的逻辑,但将 subMenu 设置为空数组而不是 null 应该可以修复此错误, setSubMenu([]) 。此外,建议使用 prevState 将值映射到现有状态:

setSubMenu((prevState) => [
  ...prevState,
  { id: 'new element' },
]);
Simas.B
2022-09-05

问题出在 setSubMenu(null); 。您需要将其设置为空数组,而不是 setSubMenu([]); ,因为根据您的使用方式, null 不可迭代

ninsau
2022-09-05