te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - TypeError: (intermediate value)(intermediate value)(intermediate value) is not iterable - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - TypeError: (intermediate value)(intermediate value)(intermediate value) is not iterable - Stack Overflow

    javascript - TypeError: (intermediate value)(intermediate value)(intermediate value) is not iterable - Stack Overflow

    programmeradmin4浏览0评论

    I am trying to use the same table of data on one page it has a filter available and on the main page it doesn't require the filter but once I switch from the transfer tab to the Convert table tab that has the state passing filtered values COMMENTED OUT I see this error in the title UNCOMMENT the mented out state will remove the error but is there a better way to pass the filter values to only one table or any ideas why the restructured start and end date is causing this error? With only the 2 currency filters & status filter, the error doesn't show again it only appears after adding the const [startDate, endDate] = filterValues?.dateRange

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

    The error seems to only happen once I pass the destructured startDate, endDate through in the 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'
//  ponents
import QueryHolder from 'ponents/ContentWrapper/QueryHolder'
import StaticTable from 'ponents/Table/StaticTable'
import NumericCell from 'ponents/Table/cell/NumericCell'
import { TransactionTypeCell } from 'ponents/Table/cell/TypeCells'
import CurrencyAmountCell from 'ponents/Table/cell/CurrencyAmountCell'
import ChartContainer from 'ponents/ChartContainer/ChartContainer'
import ChipsStatus from 'ponents/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>
    ing soon...
  </Card>
)

    I am trying to use the same table of data on one page it has a filter available and on the main page it doesn't require the filter but once I switch from the transfer tab to the Convert table tab that has the state passing filtered values COMMENTED OUT I see this error in the title UNCOMMENT the mented out state will remove the error but is there a better way to pass the filter values to only one table or any ideas why the restructured start and end date is causing this error? With only the 2 currency filters & status filter, the error doesn't show again it only appears after adding the const [startDate, endDate] = filterValues?.dateRange

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

    The error seems to only happen once I pass the destructured startDate, endDate through in the 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'
//  ponents
import QueryHolder from 'ponents/ContentWrapper/QueryHolder'
import StaticTable from 'ponents/Table/StaticTable'
import NumericCell from 'ponents/Table/cell/NumericCell'
import { TransactionTypeCell } from 'ponents/Table/cell/TypeCells'
import CurrencyAmountCell from 'ponents/Table/cell/CurrencyAmountCell'
import ChartContainer from 'ponents/ChartContainer/ChartContainer'
import ChipsStatus from 'ponents/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>
    ing soon...
  </Card>
)
    • javascript
    • reactjs
    • typescript
    • react-query
    Share Improve this question edited Dec 24, 2021 at 2:11 codingforthemoment asked Dec 24, 2021 at 1:37 codingforthemomentcodingforthemoment 1352 gold badges2 silver badges9 bronze badges 0
    Add a ment  | 

    1 Answer 1

    Reset to default 13

    looking at this code:

    const [startDate, endDate] = filterValues?.dateRange

    filterValues can be potentially undefined (looking at the optional chaining operator). You cannot destruct array value from undefined

    if you put this in a browser console:

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

    you will get the exact same error:

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

    You need to either fallback to an empty array:

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

    or not use array destructuring:

    const dateRange = filterValues?.dateRange
const startDate = dateRange?.[0]
const endDate = dateRange?.[1]
    继续浏览有关 的文章

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论