Всякий раз, когда я оборачиваю свое приложение с помощью PersistGate, он дает мне TypeError: users.map не является функцией в одном компоненте, в противном случае он отлично работает

Как сказано в заголовке, я отображаю массив, который у меня есть из api в компоненте UserCardList, и он работает нормально, но как только я оборачиваю приложение с помощью PersistGate, он дает мне TypeError: users.map не является функцией, а сообщение об ошибке от redux logger является redux-persist: время ожидания истекло для сохранения корневого ключа. Я действительно не знаю, что делаю не так.

Любая помощь будет высоко ценится.

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

import { store, persistor } from "./redux/store";

import "./index.css";
import "tachyons";
import App from "./containers/App";

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")

магазин redux

import { createStore, applyMiddleware } from "redux";
import { persistStore } from "redux-persist";
import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";
import rootReducer from "../redux/root-reducer";

const logger = createLogger();

const middlewares = [logger, thunkMiddleware];

export const store = createStore(rootReducer, applyMiddleware(...middlewares));
export const persistor = persistStore(store);

export default { store, persistor };

корень-редуктор

import { combineReducers } from "redux";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

import requestUsers from "./reducers";

const persistConfig = {
    key: "root",
    storage,
    whitelist: ["users"],
};

const rootReducer = combineReducers({
    users: requestUsers,
});

export default persistReducer(persistConfig, rootReducer);

Компонент UserCardList

import React, { Fragment } from "react";
import UserCard from "./UserCard";

const UserCardList = ({ users }) => {
  return (
    <Fragment>
      <h1 className="f1"> Users </h1>
      {users.map((user) => {
        return (
          <UserCard
            key={user.login.uuid}
            image={user.picture.large}
            firstName={user.name.first}
            lastName={user.name.last}
            email={user.email}
            city={user.location.city}
            country={user.location.country}
          />
        );
      })}
    </Fragment>
  );
};

export default UserCardList;

person kimo26    schedule 08.05.2020    source источник
comment
вы получаете что-нибудь в UserCardList, когда console.log(users)? Может быть, попробуйте users && users.map... проверить, не устанавливаются ли пользователи с задержкой   -  person Uma    schedule 09.05.2020


Ответы (2)


Я создал образец проекта здесь, взяв код из вашего вопроса, и все выглядит нормально для меня. И магазин создается, и users прибывает, как ожидалось. Возможно, это ошибка reducers, которая здесь не указана. Взгляните на образец проекта, надеюсь, он поможет.

person Nithish    schedule 09.05.2020
comment
Я видел проект и думаю, что он такой же, как у меня, но ошибка все равно не исчезнет. Честно говоря, я потратил на это столько времени. Я создал репо своего проекта. Это маленький. github.com/karimkozman/Random-user-api-app. Был бы очень признателен, если бы вы помогли мне найти, что не так. Спасибо - person kimo26; 09.05.2020
comment
Привет, я только что проверил код и во время отладки понял, что users prop в UserCardList.jsx имеет другой ключ с именем users, который на самом деле содержит данные. Поэтому в UserCardList.jsx файле вместо users.map используйте users.users.map. Это должно решить проблему - person Nithish; 09.05.2020
comment
Спасибо! Теперь это работает. но меня немного смущает другой ключ с именем users, у которого есть данные. Однако список пользователей изменяется, когда я обновляюсь, поэтому это означает, что persist не работает. Вы знаете почему? - person kimo26; 09.05.2020
comment
Насколько я понимаю из документов State Reconciler, по умолчанию должен быть установлен в autoMergeLevel1 , и если какие-либо другие свойства будут изменены в редукторе, они будут обновлены, поэтому в вашем случае isPending будет обновляться с true до false и наоборот. Кроме того, я проверил, отладив, что он работает нормально. Если вы хотите проверить, нормально ли оно работает, после запуска приложения прокомментируйте все cases в reducers.js и попробуйте перезагрузить приложение. - person Nithish; 09.05.2020
comment
Кроме того, я обнаружил еще одну ошибку в образце приложения, которым вы поделились, - это то, что в HomePage.jsx при отображении состояния вы делали это const mapStateToProps = state => { return { users: state.users, isPending: state.isPending, error: state.error }; }; Вместо этого вы должны сделать, как показано ниже const mapStateToProps = state => { return { users: state.users.users, isPending: state.users.isPending, error: state.users.error }; }; И использовать users.map в UserCardList.jsx вместо users.users.map - person Nithish; 09.05.2020
comment
Я очень ценю вашу помощь и усилия, чувак! Большое спасибо! У меня есть последний вопрос, который я обещаю, ха-ха, мне пришлось удалить состояние isPending из кейсов в reducers.js, так как это заставляло не работать. Означает ли это, что я не могу добавить еще одно состояние, поскольку они будут обновлены? Я правильно понял? Я новичок в redux, поэтому все еще учусь. - person kimo26; 09.05.2020
comment
Вовсе нет проблем, все удовольствие мое :-). Здесь я хочу упомянуть, что Persist работает, и если вы хотите хранить только данные пользователя, а не что-либо еще, это также может быть достигнуто, даже если есть и другие переменные состояния. Этого можно достичь с помощью подхода вложенных постоянных файлов. Также ожидается, что если есть какие-либо изменения в других переменных состояния, то постоянное хранилище должно обновиться и будет обновляться для этого конкретного состояния, а не для всего остального. В вашем случае будет обновляться только isPending. - person Nithish; 09.05.2020
comment
Я столкнулся с этой странной проблемой. Я попытался очистить локальное хранилище браузера с помощью localStorage.clear(), но теперь нет списка пользователей. Похоже, что PersistStore работает, когда я уже получил и сохранил пользователей один раз. Итак, пользователи загружаются, но не сохраняются. У вас есть идеи, как я могу решить эту проблему? извините за то, что задаю слишком много вопросов. - person kimo26; 11.05.2020
comment
Ничего страшного, совсем не проблема :-). По умолчанию redux-persist используется localStorage для Интернета. Поэтому ожидается, что при вызове localStorage.clear() будет очищен список пользователей, который сохранялся. Но я не совсем понял, с какой проблемой вы столкнулись. Извините, не могли бы вы объяснить. - person Nithish; 11.05.2020
comment
Я имею в виду, есть ли другой способ сохранить пользователей, чтобы при вызове localStorage.clear() они все еще были там? - person kimo26; 11.05.2020
comment
Если вам нужно сделать localStorage.clear(), но вы по-прежнему хотите сохранить данные, я могу подумать об изменении типа хранилища redux-persist на sessionStorage, например import storageSession from 'redux-persist/lib/storage/session' в root-reducer, и использовать в persistConfig. При этом есть некоторые ограничения использования sessionStorage по сравнению с localStorage. Доступно несколько других механизмов хранения. Ознакомьтесь с здесь - person Nithish; 11.05.2020
comment
Честно говоря, я не знаю, что сказать, но ты лучший! Желаю, чтобы больше людей были терпеливыми и отзывчивыми, как и вы :) Еще раз спасибо! - person kimo26; 11.05.2020
comment
Спасибо вам :-). Это много значит. Я не делаю ничего хорошего, просто пытаюсь помочь тем, что знаю. В конце концов, если я застряну, я тоже вернусь сюда сам. Я знаю, как сложно будет найти решение, которое мы ищем. Так что с удовольствием помогу. - person Nithish; 11.05.2020
comment
Эй, парень, как ты? Мне было интересно, можете ли вы мне помочь с этим: stackoverflow.com/questions/62580312/, так как вы единственный, кто пришел мне в голову из-за того, насколько вы были полезны в прошлый раз, когда Я действительно застрял в этом, ха-ха. Извините за беспокойство - person kimo26; 26.06.2020
comment
Конечно. Будем смотреть и спасибо, что обратились к нам. :) - person Nithish; 26.06.2020
comment
Я только что понял, так что не беспокойтесь. Документация библиотеки Ant Design не самая лучшая. Спасибо тебе! Хорошего дня! - person kimo26; 26.06.2020

Я вижу, что в магазине redux у вас есть это:

export const store = createStore(rootReducer, applyMiddleware(...middlewares));
export const persistor = persistStore(store);
// you dont need line below, you exported store and persistore in lines above
export default { store, persistor };
person Uma    schedule 09.05.2020