如何修复days.map is not a function错误？已确认days为数组

问题描述 #

执行代码days.map((val)=>val)时触发days.map is not a function错误，但控制台打印days的结果显示它是一个嵌套数组：

[Array(7)]
0: (7) ['', '', '', 'Wednesday', '', '', 'Saturday']
length: 1

组件代码 #

import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import {
    Card,
    CardMedia,
    CardActions,
    Icon,
    Grid,
    Radio,
    Button,
    RadioGroup,
    FormControlLabel,
    Select as MuiSelect,
    MenuItem,
    FormControl,
    InputLabel,
    IconButton,
    CircularProgress,
    Divider,
    Snackbar, Alert, Typography
} from '@mui/material';

function SpecialPriceTable({
    tableData,
    days
}) {
    return (
        <TableContainer component={Paper}>
            <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
                <TableHead>
                    <TableRow>
                        <TableCell align="right">Start Date</TableCell>
                        <TableCell align="right">End Date</TableCell>
                        <TableCell align="right">Recurrence</TableCell>
                        <TableCell align="right">Price Type</TableCell>
                        <TableCell sx={{ pr: 3 }} align="right">Price</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {tableData.map((data, index) => (
                        <TableRow
                            key={index}
                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                            <TableCell align="right">
                                {data.start_date}
                            </TableCell>

                            <TableCell align="right">
                                {data.end_date}
                            </TableCell>

                            {/* <TableCell align="right">
                                {data.recurrenceType === 1 ? 'All day' : data.recurrenceType === 2 ? 'Weekend(Every Saturday and Sunday)' :
                                    data.recurrenceType === 3 ? days.map((item) => item.join(' ')) : ''}
                            </TableCell> */}

                            {console.log(days[0].map(val=>val))}

                            <TableCell align="right">
                                {data.priceType === 0 ? 'Whole' : data.priceType === 1 ? 'Per Person' : data.priceType === 2 ? 'Per Hours' : ''}
                            </TableCell>

                            <TableCell sx={{ pr: 3 }} align="right">
                                {data.price}
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    )
}

export default SpecialPriceTable

解决建议 #

• 校验days的类型与存在性：组件渲染初期，days可能是undefined或null（比如异步数据未加载完成），直接调用map会报错。可以用可选链或条件判断做防护：

  // 可选链写法
  days?.map(item => item.join(' '))
  // 条件判断写法
  Array.isArray(days) ? days.map(item => item.join(' ')) : ''
  

• 适配嵌套数组结构：从控制台输出看，days是数组的数组（外层数组长度为1，内部是7元素的数组）。如果要渲染内部的星期数据，需操作days[0]，同时校验days[0]的类型：

  Array.isArray(days) && Array.isArray(days[0]) 
      ? days[0].filter(item => item).join(', ') 
      : ''
  

  （filter(item => item)用于过滤空字符串，只显示有内容的星期几）
• 设置默认props：在组件内部给days设置默认空数组，避免父组件未传值或传值为undefined时出错：

  function SpecialPriceTable({
      tableData,
      days = []
  }) {
      // ...组件逻辑
  }
  

• 父组件传值校验：确保父组件传给SpecialPriceTable的days始终是数组类型。如果是异步获取的数据，初始值设为空数组：

  <SpecialPriceTable tableData={yourTableData} days={days || []} />
  

内容的提问来源于stack exchange，提问作者Noob_Mern_Dev