reactjs - TypeError：无法读取未定义的属性“地图”，但我的变量是空数组

Question

我有一个名为“groups”的变量，它从 redux 商店接收值：

const groups = useSelector(state => state.groupPermissionsStates.groups);

我的减速器用一个空数组初始化这个变量：

const INITIAL_STATE = {
    groups: [],
    lastPage: 1
}

const groupPermissionsStates = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case "REQUEST_GET_GROUPS_PERMISSIONS":
            return {
                ...state,
                groups: action.payload.data,
                lastPage: action.payload.lastPage
            }
            case "CLEAR_GROUPS_PERMISSIONS_LIST":
                return {
                    ...state,
                    groups: [],
                    lastPage: 1
                }
            default:
                return state
    }
}

export default groupPermissionsStates;

在我的模板中，我正在做一个group.map()遍历这个数组，但我收到：

TypeError：无法读取未定义的属性“地图”

我检查这个变量是否正在使用 useEffect 更改您的值，但只打印一次并且您的值是一个空数组：

useEffect(() => {
    console.log(groups)
}, [groups]); // eslint-disable-line

当我放一个{ groups && groups.map(group => (而不是

{ groups.map(group => (

我没有收到此错误并且我的页面启动。

我的组件安装后是我的商店加载吗？我有其他组件，我以前不使用检查器并正常运行：

{users.map(user => (

这个 users 是一个变量，你的代码基于 redux 存储：

const users = useSelector(state => state.userStates.users);

我发现这两个组件之间没有任何区别，除了使用 users 变量的组件有一个useEffect()向我的服务器发出请求并返回填充的用户数组。

@编辑：

这是我的根减速器：

import userStates from '../modules/users/user.reducer'
import groupPermissionsStates from './group-permissions/group-permissions.reducer'

import { combineReducers } from 'redux'

const rootReducer = combineReducers({
    groupPermissionsStates
    userStates
})

我的商店创建：

    import { createStore, applyMiddleware } from 'redux';
    import createSagaMiddleware from 'redux-saga';
    import rootReducer from './modules/rootReducer';
    import rootSaga from './modules/rootSaga';


    const sagaMiddleware = createSagaMiddleware();
    const enhancer =
      process.env.NODE_ENV === 'development'
        ? applyMiddleware(sagaMiddleware)
        : applyMiddleware(sagaMiddleware);
    const store = createStore(rootReducer, enhancer);
    sagaMiddleware.run(rootSaga);
    export default store;

我的 index.js：

ReactDOM.render(
    <Provider store={store}>
        <SnackbarProvider autoHideDuration={3500} maxSnack={3}>
            <Notifier />
            <AppRouter/>
        </SnackbarProvider>
    </Provider>, document.getElementById('root'));

serviceWorker.unregister();

我的地图：

{ groups.map(group => (
    <TableRow key={group.id}>
        <TableCell component="th" scope="row">
            {group.name}
        </TableCell>
        <TableCell align="right">
            {group.inactive === false
                ? "Sim"
                : "Não"}
        </TableCell>
        <TableCell align="right">
            <IconButton
                color="primary"
                aria-label="editar"
                onClick={() => editGroup(group)}
            >
                <EditIcon />
            </IconButton>
        </TableCell>
    </TableRow>
))}

标签： reactjsredux