Question

我有这个项目，是一个员工监控项目，有一个界面可以显示项目中的所有工作区。我调用了 Workspaces，它是一个单卡 Workspace，工作区矩阵之一，但我遇到了这个问题：

                 TypeError: Cannot read property 'map' of undefined

我该如何解决？在这个文件中，我设计了所有工作区卡片都会出现的界面

import { useState} from 'react';
import type {FC} from 'react';
import {
    Box,
    Grid,
    Pagination,
    Typography
} from '@material-ui/core';
// import ViewModuleIcon from '@material-ui/icons/ViewModule';
// import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import type {Workspace} from '../types/workspace';
import WorkspaceCard from '../../workspaces/pages/WorkspaceCard';


interface WorkspaceBrowseResultsProps {
    workspaces: Workspace[];
}

const WorkspaceBrowseResults: FC<WorkspaceBrowseResultsProps> = (props) => {
    const {workspaces} = props;

    return (
        <div>
            <Box
                sx={{
                    alignItems: 'center',
                    display: 'flex',
                    flexWrap: 'wrap',
                    justifyContent: 'space-between',
                    mb: 2
                }}
            >
                <Typography
                    color="textPrimary"
                    sx={{
                        position: 'relative',
                        '&:after': {
                            backgroundColor: 'primary.main',
                            bottom: '-8px',
                            content: '" "',
                            height: '3px',
                            left: 0,
                            position: 'absolute',
                            width: '48px'
                        }
                    }}
                    variant="h5"
                >
                    Showing
                    {' '}
                    {/*{workspaces.length}*/}
                    7
                    {' '}
                    workspaces
                </Typography>

            </Box>
            <Grid
                container
                spacing={3}
            >
                {workspaces.map(workspace => (
                    <Grid
                        item
                        key={workspace.id}
                        md={4}
                        // sm={mode === 'grid' ? 6 : 12}
                        xs={12}
                    >
                        <WorkspaceCard workspace={workspace}/>
                    </Grid>
                ))}
            </Grid>
            <Box
                sx={{
                    display: 'flex',
                    justifyContent: 'center',
                    mt: 6
                }}
            >
                <Pagination count={3}/>
            </Box>
        </div>
    );
};


export default WorkspaceBrowseResults;

Answer 1

当程序第一次运行时，工作空间的值是未定义的，所以有两种方法可以解决它，首先为第二次使用提供初始值，如果条件直到工作空间为空，则反应忽略命令

类型错误：无法读取 react/

1 个答案: