使用 React-Context 时对象不可迭代错误 [英] Object is not iterable Error while Using React-Context

问题描述

所以我最近开始使用 React 并且正在学习 Context Api.我的代码的热情是:

export const UsersContext = createContext();导出函数 UsersProvider(props) {const fetchedItem = 异步函数 () {const data = await fetch('https://jsonplaceholder.typicode.com/users');const users = await data.json();设置用户(用户)；};const [users, setUsers] = useState([]);使用效果(函数(){获取项目()；}, []);返回 (<UsersContext.Provider value={[users, setUsers]}>{props.children}</UsersContext.Provider>);}

我尝试像这样导入和迭代用户数组:

import { UsersContext, UsersProvider } from './UsersContext';导出默认函数 UsersPage() {const [users, setUsers] = useContext(UsersContext);返回 (<用户提供者>{users.map(功能(用户){//我对用户对象做了一些事情});}</UsersProvider>

问题是这不起作用，我不确定在网络上搜索它的术语是什么.我得到 TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) 这对我来说意味着 users 不是数组?但就我而言，它是.有什么修复/调试的建议吗?

解决方案

您在提供程序之外使用 useContext，您应该在子组件中使用 useContext.

import { UsersContext, UsersProvider } from './UsersContext';导出默认函数 UsersPage() {const [users, setUsers] = useContext(UsersContext);返回 (<用户提供者>{users.map(功能(用户){<div key={user.id}>{user.id}</div>})}</UsersProvider>);}

与

相同

import { UsersContext, UsersProvider } from './UsersContext';导出默认函数 UsersPage() {返回 (<UsersContext.Consumer>{([users, setUsers]) =>(<用户提供者>{users.map(function(user) {<div key={user.id}>{user.id}</div>;})}</UsersProvider>)}</UsersContext.Consumer>);}

如你所见，消费者不是提供者的孩子，因此没有提供任何东西.在子组件中使用它是可行的.

import { UsersContext, UsersProvider } from './UsersContext';导出默认函数 UsersPage() {返回 (<用户提供者><UsersPageChild/></UsersProvider>);}函数 UsersPageChild() {const [users, setUsers] = useContext(UsersContext);返回 (<div>{users.map(function(user) {<div key={user.id}>{user.id}</div>;})}

);}

So I recently started using React and am learning the 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? 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.

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>
  );
}

这篇关于使用 React-Context 时对象不可迭代错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！