![](/img/trans.png)
[英]How to fix: React-Context - TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))
[英]Object is not iterable Error while Using React-Context
所以我最近开始使用 React 并且正在学习 Context Api。 我的代码的热情是:
export const UsersContext = createContext();
export function UsersProvider(props) {
const fetchedItem = async function () {
const data = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await data.json();
setUsers(users);
};
const [users, setUsers] = useState([]);
useEffect(function () {
fetchedItem();
}, []);
return (
<UsersContext.Provider value={[users, setUsers]}>{props.children}</UsersContext.Provider>
);
}
我尝试像这样导入和迭代用户数组:
import { UsersContext, UsersProvider } from './UsersContext';
export default function UsersPage() {
const [users, setUsers] = useContext(UsersContext);
return (
<UsersProvider>
{users.map(function (user) {
//I do something with user object});}
</UsersProvider>
问题是这不起作用,我不确定在网上搜索它的术语是什么。 我得到TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))
这对我来说意味着users
不是数组? 但就我而言,它是。 任何修复/调试此问题的建议?
您在提供程序之外使用useContext
,您应该在子组件中使用useContext
。
import { UsersContext, UsersProvider } from './UsersContext';
export default function UsersPage() {
const [users, setUsers] = useContext(UsersContext);
return (
<UsersProvider>
{users.map(function (user) {
<div key={user.id}>{user.id}</div>
})}
</UsersProvider>
);
}
是相同的
import { UsersContext, UsersProvider } from './UsersContext';
export default function UsersPage() {
return (
<UsersContext.Consumer>
{([users, setUsers]) => (
<UsersProvider>
{users.map(function(user) {
<div key={user.id}>{user.id}</div>;
})}
</UsersProvider>
)}
</UsersContext.Consumer>
);
}
如您所见,消费者不是提供者的孩子,因此没有提供任何内容。 在子组件中使用它是有效的。
import { UsersContext, UsersProvider } from './UsersContext';
export default function UsersPage() {
return (
<UsersProvider>
<UsersPageChild />
</UsersProvider>
);
}
function UsersPageChild() {
const [users, setUsers] = useContext(UsersContext);
return (
<div>
{users.map(function(user) {
<div key={user.id}>{user.id}</div>;
})}
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.