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

Question

正如标题所说，我正在从UserCardList组件中的一个api映射一个数组，它工作得很好，但一旦我用PersistGate封装了应用程序，它就会给我"TypeError:users.map不是一个函数"并且来自redux记录器的错误消息是"0"；redux-persistent:persistent键的persistent超时"；根"；。我真的不知道我做错了什么。

如有任何帮助，我们将不胜感激。

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;

Answer 1

我从你的问题中提取代码，在这里创建了一个示例项目，一切看起来都很好。商店正在创建，users也如期而至。reducers中可能存在错误，此处未发布。请看一下这个示例项目，希望它能有所帮助。

Answer 2

我在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 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),
})

从这里得到了解决方案