Объект не повторяется Ошибка при использовании React-Context

Question

Итак, я недавно начал использовать 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 не массив? Но это насколько я обеспокоен. Любые предложения по исправлению / отладке этого?

Answer 1

Вы используете 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>
  );
}