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