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

Question

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

后出现

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

错误似乎只有在我通过 ConvertHistoryTable 中的解构开始日期和结束日期时才会发生

 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 [startDate, endDate] = filterValues?.dateRange

filterValues 可能是 undefined （查看可选的链接运算符）。您不能从 undefined

中破坏数组值

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

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

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

VM291:1 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) at :1:30

您需要回退到空数组：

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

或者不使用数组解构:

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

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

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

javascript

reactjs

typescript

react-query