类型错误：（中间值）（中间值）（中间值）不可迭代

Question

我试图在一页上使用相同的数据表，它有一个可用的过滤器，在主页上它不需要过滤器，但是一旦我从“传输”选项卡切换到“转换表”选项卡，该选项卡的状态会传递过滤值注释掉 我在标题中看到此错误取消注释注释掉的状态将删除该错误，但是否有更好的方法将过滤器值仅传递到一个表或任何想法为什么重组的开始和结束日期导致此错误？仅使用 2 个货币过滤器和状态过滤器，错误不会再次显示，仅在添加const [startDate, endDate] = filterValues?.dateRange

TypeError: (intermediate value)(intermediate value)(intermediate value) is not iterable

该错误似乎仅在我在 ConvertHistoryTable 中传递解构的 startDate、endDate 后才会发生

 const [startDate, endDate] = filterValues?.dateRange

//ConvertHistoryTable
import React from 'react'

import { useNavigate } from 'react-router-dom'
import { format } from 'date-fns'

import TableCell from '@mui/material/TableCell'
import TableRow from '@mui/material/TableRow'
import IconButton from '@mui/material/IconButton'
import PreviewIcon from '@mui/icons-material/Preview'
//  components
import QueryHolder from 'components/ContentWrapper/QueryHolder'
import StaticTable from 'components/Table/StaticTable'
import NumericCell from 'components/Table/cell/NumericCell'
import { TransactionTypeCell } from 'components/Table/cell/TypeCells'
import CurrencyAmountCell from 'components/Table/cell/CurrencyAmountCell'
import ChartContainer from 'components/ChartContainer/ChartContainer'
import ChipsStatus from 'components/Chips/ChipsStatus'
//  hooks
import { useGetExchangedRecord } from 'hooks/exchange'
import { ExchangeOverview } from '../types/Transaction'
import { FilterValues } from '../TransactionsOverview'

type Props = {
  filterValues?: FilterValues
  maxHeight?: number
  small?: boolean
}

export default function ConvertHistoryTable({ filterValues, maxHeight, small }: Props) {
  const [startDate, endDate] = filterValues?.dateRange

  const queryRes = useGetExchangedRecord(
    filterValues?.status,
    filterValues?.creditCurrencyCode,
    filterValues?.debitCurrencyCode,
    startDate ? format(startDate, 'yyyy-MM-dd') : undefined,
    endDate ? format(endDate, 'yyyy-MM-dd') : undefined
  )

  const records: ExchangeOverview[] = queryRes.isSuccess ? queryRes.data.data : []

  return (
    <ChartContainer>
      <QueryHolder queryRes={queryRes}>
        <StaticTable
          small={small}
          maxHeight={maxHeight}
          fieldRows={['Number', 'Type', 'Exchange rate', 'Debit', 'Credit', 'Status', 'Details']}
          valueRows={records.map((item: ExchangeOverview) => (
            <TableItem item={item} key={item.uuid} />
          ))}
        />
      </QueryHolder>
    </ChartContainer>
  )
}

const TableItem = ({ item }: any) => {
  const navigate = useNavigate()

  function handleToDetail(uuid: string) {
    return navigate(`/convert/details/${uuid}`)
  }

  return (
    <TableRow>
      <TableCell>{item.refNum}</TableCell>
      <TransactionTypeCell type={item.type} />
      <NumericCell value={item.exchangeRate} />
      <CurrencyAmountCell currencyCode={item.creditCurrencyCode} amount={item.creditAmount} />
      <CurrencyAmountCell currencyCode={item.debitCurrencyCode} amount={item.debitAmount} />
      <TableCell>
        <ChipsStatus status={item.status} />
      </TableCell>
      <TableCell>
        <IconButton onClick={() => handleToDetail(item.detailsUuid)}>
          <PreviewIcon />
        </IconButton>
      </TableCell>
    </TableRow>
  )
}

//mainpage
type TabPanelProps = {
  children?: React.ReactNode
  index: number
  value: number
}
export type FilterValues = {
  status: string
  currency: string
  creditCurrencyCode: string
  debitCurrencyCode: string
  dateRange: any
}

function TabPanel({ children, value, index, ...other }: TabPanelProps) {
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`table-tabpanel-${index}`}
      aria-labelledby={`table-tab-${index}`}
      {...other}
    >
      {value === index && <Box>{children}</Box>}
    </div>
  )
}

function a11yProps(index: number) {
  return {
    id: `table-tab-${index}`,
    'aria-controls': `table-tabpanel-${index}`,
  }
}

export default function Dashboard() {
  const [tabValue, setTabValue] = React.useState(0)

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setTabValue(newValue)
  }

  const [transferFilterValues, setTransferFilterValues] = React.useState<FilterValues>({
    status: '',
    currency: '',
    creditCurrencyCode: '',
    debitCurrencyCode: '',
    dateRange: [null, null],
  })

  // const [exchangeFilterValues, setExchangeFilterValues] = React.useState<FilterValues>({
  //   status: '',
  //   currency: '',
  //   creditCurrencyCode: '',
  //   debitCurrencyCode: '',
  //   dateRange: [null, null],
  // })

  return (
    <Grid container spacing={4}>
      <Grid item xs={12}>
        <AccountBalances />
      </Grid>
      <Grid item xs={12}>
        <Grid container spacing={2}>
          <Grid item xs={12} md={9}>
            <Tabs
              value={tabValue}
              onChange={handleTabChange}
              aria-label="transaction tabs"
              centered
            >
              <Tab label="Transfer" {...a11yProps(0)} />
              <Tab label="Convert" {...a11yProps(1)} />
            </Tabs>
          </Grid>
          <Grid item xs={9} sx={{ display: { xs: 'none', md: 'flex' } }} />
          <Grid item xs={12} md={9}>
            <TabPanel value={tabValue} index={0}>
              <TransferHistoryTable filterValues={transferFilterValues} maxHeight={500} small />
            </TabPanel>
            <TabPanel value={tabValue} index={1}>
              <ConvertHistoryTable maxHeight={500} small />
            </TabPanel>
          </Grid>
          <Grid item xs={12} md={3}>
            <FakeBox height="400px" />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  )
}

const FakeBox = ({ height }) => (
  <Card
    sx={{
      minHeight: height,
    }}
  >
    <Typography variant="h3">Notification</Typography>
    coming soon...
  </Card>
)

Answer 1

看这段代码：

const [开始日期，结束日期] = filterValues?.dateRange

filterValues可能是undefined（查看可选链接运算符）。您不能从以下位置破坏数组值undefined

如果你把它放在浏览器控制台中：

const filterValues = undefined
const [startDate, endDate] = filterValues?.dateRange

你会得到完全相同的错误：

VM291:1 未捕获类型错误：未定义不可迭代（无法读取属性 Symbol(Symbol.iterator)），时间：1:30

您需要回退到空数组：

const [startDate, endDate] = filterValues?.dateRange ?? []

或者不使用数组解构：

const dateRange = filterValues?.dateRange
const startDate = dateRange?.[0]
const endDate = dateRange?.[1]