开发者问题收集

TypeError：Data.filter 不是 React js 中的函数

2022-07-13
7483
javascript reactjs jsx

我将 prop 从父级传递给子级，然后将其返回。但我收到此过滤器不是函数错误。如果您能帮助我找出错误，那将非常有帮助。

过滤以下数组

Data = [{"e":"24hrMiniTicker","E":1657740208155,"s":"ETHBTC","c":"0.05494500","o":"0.05375100","h":"0.05507300","l":"0.05320200","v":"181144.04630000","q":"9804.01944501"},{"e":"24hrMiniTicker","E ":1657740208676,"s":"BTCUSDT","c":"19768.97000000","o":"19431.27000000","h":"20128.39000000","l":"18910.94000000","v":"206075.46066000","q":"4019503677.20509370"}] 

import React from 'react';
import { Box } from '@mui/material';
import Link from '@mui/joy/Link';
import Card from '@mui/joy/Card';
import Chip from '@mui/joy/Chip';
import Typography from '@mui/joy/Typography';


const CounterBox = ({Data}) => {


    return (
      <div>
        <Card
      variant="outlined"
      row
      sx={{
        maxWidth: '320px',
        minWidth: '100px',
        gap: 2,
        '&:hover': {
          boxShadow: 'md',
          borderColor: 'neutral.outlinedHoverBorder',
        },
      }}
    >
      <Box>
        <Box sx={{ ml: 0.5 }}>
          <Typography level="h2" fontSize="md" id="card-description" mb={0.5}>
            BTCUSDT
          </Typography>
          <Typography
            level="h3"
            fontSize="bg"
            aria-describedby="card-description"
            mb={1}
          >
            <Link
              overlay
              underline="none"
              href="#interactive-card"
              sx={{ color: 'black' }}
              >
              ${Data.filter(item => item === "BTCUSDT").map(item => item.c)}
            </Link>
          </Typography>
          <Chip
            variant="outlined"
            color="primary"
            size="sm"
            sx={{ pointerEvents: 'none' }}
          >
            Cool weather all day long
          </Chip>
        </Box>
      </Box>

      <Box>
        <Link
          overlay
          underline="none"
          href="#interactive-card"
          sx={{ color: 'green' }}
        >
          High "wait"
        </Link>
        <br />
        <br />

        <Typography level="h2" fontSize="md" id="card-description" mb={0.5}>
          Other
        </Typography>
      </Box>

      <Box>
        <Link
          overlay
          underline="none"
          href="#interactive-card"
          sx={{ color: 'red' }}
        >
          Low "wait"
        </Link>
      </Box>
    </Card>
    </div>
    );
}
export default CounterBox;
1个回答

您所说的错误“filter 不是函数”发生在我们对非数组类型的变量调用 filter 时。如果 streamData 是相关变量，我会检查它以确保它确实是您所认为的那个变量（一个数组）。

我没有看到您在哪里使用解构的 Data 变量，也没有看到您在您发布的代码中在哪里定义 streamData 。您是否有可能想要使用 Data.streamData.filter(...) ，或者您错误地使用了解构赋值？

---- 更新 ----

根据您评论中包含的信息，我认为这是一个解构问题。

假设您有以下道具： 

props = {
    Data: [your data],
    OtherKey: "Some Value"
}

当您像这里一样解构道具时，我认为您期望 {Data}} 等于 [your data] ，但 {Data}} 将等于 { Data: [your data]> ，因此，您尝试过滤对象，而不是数组。

这里有几个选项，其中最简单的可能是更改：

const CounterBox = ({Data}) => {

至：

const CounterBox = ({Data: {Data}}) => {

不过，这不是最干净的。但是，如果该快速修复有效，那么您应该能够根据自己的需要进行清理。

Nukem
2022-07-13