[英]Object is not iterable Error while Using React-Context
So I recently started using React and am learning the Context Api.所以我最近开始使用 React 并且正在学习 Context Api。 The zest of my code is:
我的代码的热情是:
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>
);
}
And I try to import and iterate over the users array like so:我尝试像这样导入和迭代用户数组:
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>
The issue is this does not work and I am not sure what the terminologies are to search it on the web.问题是这不起作用,我不确定在网上搜索它的术语是什么。 I get
TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))
which to me means that users
is not an array?我得到
TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))
这对我来说意味着users
不是数组? But it is as far as I am concerned.但就我而言,它是。 Any suggestions for fixing/debugging this?
任何修复/调试此问题的建议?
You're using useContext
outside of the provider, you should use useContext
in a child component.您在提供程序之外使用
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>
);
}
is the same as是相同的
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>
);
}
as you can see the consumer is not a child of the provider, thus there is nothing provided to it.如您所见,消费者不是提供者的孩子,因此没有提供任何内容。 Consuming it in a child component works.
在子组件中使用它是有效的。
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.