javascript - 每当我用 PersistGate 包装我的应用程序时，它都会在一个组件中给我“TypeError：users.map is not a function”，否则它可以正常工作

Question

正如标题所说，我正在通过我从 UserCardList 组件中的 api 获得的数组进行映射，它工作正常，但是一旦我用 PersistGate 包装 App，它就会给我“TypeError：users.map is not a function”和错误消息来自redux logger的是“redux-persist：persist key”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")

还原商店

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;

标签： javascriptreactjsreduxreact-reduxredux-persist

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