Whenever I wrap my App with PersistGate it gives me "TypeError: users.map is not a function" in one component, otherwise it works fine

Question

正如标题所说，我正在通过我从 UserCardList 组件中的 api 获得的数组进行映射，它工作正常但是一旦我用 PersistGate 包装应用程序，它就会给我“TypeError：users.map 不是函数”，redux 记录器的错误消息是“redux-persist：持久键“root”的持续超时。我真的不知道我做错了什么。

非常感谢任何帮助。

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

root-reducer

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;

Answer 1

我在 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 };

Answer 2

我通过从您的问题中获取代码创建了一个示例项目 here，一切看起来都很好。商店正在创建中，users 如期而至。 reducers 中可能存在未在此处发布的错误。请查看示例项目，希望对您有所帮助。

Answer 3

就我而言，将 timeout: null 添加到持久配置解决了我的问题。

const persistConfig = {
  key: 'keyOfStore',
  storage: storage,
  // There is an issue in the source code of redux-persist (default setTimeout does not cleaning)
  timeout: null,
}
const appReducer = combineReducers({
  ...otherReducers,
  keyOfStore: persistReducer(persistConfig, keyOfStoreRedfucer),
})

Got the solution from here

Whenever I wrap my App with PersistGate it gives me "TypeError: users.map is not a function" in one component, otherwise it works fine

Whenever I wrap my App with PersistGate it gives me "TypeError: users.map is not a function" in one component, otherwise it works fine

javascript

reactjs

redux

react-redux

redux-persist