TypeError: Data. error.Filter在react js中不是一个函数

Question

我将prop从父级传递给子级，然后返回它。但是我得到这个过滤器不是一个函数错误。如果你能帮我找出错误，那就太有帮助了。

筛选数组

Data =[{"e"24 hrminiticker","e": 1657740208155,"s":"ETHBTC","c":"0.05494500","o":"0.05375100","h":"0.05507300","l":"0.05320200","v":"181144.04630000","q":"9804.01944501";},{"e"24 hrminiticker","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;

Answer 1

当我们在非数组类型的变量上调用filter时，会出现您声明的"filter不是一个函数"的错误。如果streamData是有问题的变量，我会检查它以确保它实际上是你认为的(一个数组)。

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

---- UPDATE ----

根据你评论中的信息，我相信这是一个解构问题。

假设你有以下道具:

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

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

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

const CounterBox = ({Data}) => {

:

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

虽然，它不是最干净的。但是，如果快速修复有效，那么您应该能够在您认为合适的情况下清理它。