Javascript 每当我用PersistGate包装我的应用程序时，它都会给我；TypeError:users.map不是函数；在一个组件中，否则它可以正常工作

正如标题所说，我正在通过UserCardList组件中的api中的一个数组进行映射，它工作正常，但一旦我使用PersistGate包装应用程序，它会给我“TypeError:users.map不是函数”，并且redux记录器的错误消息是“redux persist:persist Timeout for persist key”根“我真的不知道我做错了什么

任何帮助都将不胜感激

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 { 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);

用户卡片列表组件

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;

import React，{Fragment}来自“React”；
从“/UserCard”导入用户卡；
const UserCardList=（{users}）=>{
返回(
使用者
{users.map（（用户）=>{
返回(
);
})}
);
};
导出默认用户卡片列表；

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

---

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

---

我从你的问题中提取了代码，创建了一个示例项目，对我来说一切都很好。商店正在创建，

用户将如期到来。
减速机
中可能存在错误，但未在此处发布。请看一看示例项目，希望它能有所帮助。
我从您的问题中提取了代码，创建了一个示例项目，我觉得一切都很好。商店正在创建，
用户将如期到来。
减速机
中可能存在错误，但未在此处发布。请看一下示例项目，希望能有所帮助。
当
console.log（users）
时，您在
UserCardList
中得到了什么吗？可能尝试
users&&users.map…
查看用户是否设置了延迟
UserCardList
当
console.log（users）
时，您是否在
UserCardList
中获得了任何信息？也许可以尝试
users&&users.map…
查看用户是否设置了delayHey我刚刚检查了代码，在调试时我了解到
users
prop in
UserCardList.jsx
有另一个名为
users
的键，它实际上包含数据。因此，在
UserCardList.jsx
文件中，而不是使用
users.map
使用
users.users.map
。根据我从文档中了解的情况，这应该可以解决问题。默认情况下，它将设置为
autoMergeLevel1
，如果减速机中的任何其他属性发生更改，它们将得到更新，因此在您的情况下，
isPending
将从
true
更新为
false
，反之亦然。另外，我已经通过调试检查了它是否工作正常。如果您想检查它是否工作正常，启动应用程序后，请在
reducers.js
中注释所有
案例
，然后尝试重新加载应用程序。此外，我在你共享的示例应用程序中发现的另一个错误是，在映射状态时，你在
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}；}
并在
UserCardList.jsx
中使用
users.map
，而不是
users.users.map
一点问题都没有，我很高兴：-）。这里我要提到的一点是，Persist正在工作，如果您只想存储用户的数据，那么即使存在其他状态变量，也无法实现其他任何功能。这可以通过使用这种方法来实现。另外，如果其他状态变量发生任何更改，则持久化存储应该得到更新，并且将针对该特定状态而不是其他所有状态进行更新。在您的情况下，只有
isPending
会得到更新。没关系，一点问题也没有：-）。默认情况下，
redux persist
对web使用
localStorage
。因此，当您调用
localStorage.clear（）
时，应该会清除正在存储的用户列表。但我不太明白你面临的问题是什么。抱歉，请您解释一下。嘿，我刚刚检查了代码，在调试时，我了解到
UserCardList中的
users
prop。jsx
有另一个名为
users
的键，它实际上包含数据。因此，在
UserCardList.jsx
文件中，而不是使用
users.map
使用
users.users.map
。根据我从文档中了解的情况，这应该可以解决问题。默认情况下，它将设置为
autoMergeLevel1
，如果减速机中的任何其他属性发生更改，它们将得到更新，因此在您的情况下，
isPending
将从
true
更新为
false
，反之亦然。另外，我已经通过调试检查了它是否工作正常。如果您想检查它是否工作正常，启动应用程序后，请在
reducers.js
中注释所有
案例
，然后尝试重新加载应用程序。此外，我在你共享的示例应用程序中发现的另一个错误是，在映射状态时，你在
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}；}
并在
UserCardList.jsx
中使用
users.map
，而不是
users.users.map
一点问题都没有，我很高兴：-）。这里我要提到的一点是，Persist正在工作，如果您只想存储用户的数据，那么即使存在其他状态变量，也无法实现其他任何功能