虽然有时它有效，但我在我的 React 项目中得到了".filter is not a function"

Question

28 | <Grid.Row>
29 |   {cars.map((car) => (
30 |     <Grid.Column style={{marginBottom:"1em"}}>
> 31 |       <CarComponent car={car} imagePath={carImages.filter(image=>image.car.id===car.id)[0].imagePath}></CarComponent>
| ^  32 |       
33 |     </Grid.Column>
34 |   ))}

我从不同的服务(carController, carImageController)获得车辆的信息(品牌，颜色，描述等)和照片。因此，当尝试列出汽车时，我选择carId等于汽车列表中每辆汽车的照片列表中该车的id的照片。我将imagePath写成carImages.filter(image=>image.car.id===car.id)[0]。imagePath}对来自照片服务的数据进行检查，并将其作为道具发送给car组件。有时，当一切正常时，我得到这个typeError。这是为什么呢?

汽车功能组件:

export default function CarComponent({ car, imagePath}) {
return (
<div>
<Card style={{height:"388px"}}>
<Image 
src={imagePath}
wrapped
ui="false"
style={{height:"200px"}}

/>
<Card.Content>
<Card.Header>{car.brand.name}</Card.Header>
<Card.Meta>
<span className="date">{car.modelYear}</span>
</Card.Meta>
<Card.Description>{car.description}</Card.Description>
</Card.Content>
<Card.Content extra style={{color:"black"}} >
<h3 >{car.dailyPrice} ₺</h3>
<Button secondary animated>
<Button.Content visible>Kirala</Button.Content>
<Button.Content hidden>
<Icon name="arrow right" />
</Button.Content>
</Button>
</Card.Content>
</Card>
</div>
);}

汽车图像类

export default class CarImageService{
getCarImages(){
return axios.get("http://localhost:8080/api/images/getAll")
}
}

CarsList页

export default function CarsList() {

const [cars, setCars] = useState([]);
const [carImages, setCarImage] = useState({});
useEffect(() => {
let carImageService = new CarImageService();
carImageService
.getCarImages()
.then((result) => setCarImage(result.data.data));

}, []);
useEffect(() => {
let carService = new CarService();
carService.getCars().then((result) => setCars(result.data.data));
}, []);
return (
<div>
<Grid columns={3} >
<Grid.Row>
{cars.map((car) => (
<Grid.Column style={{marginBottom:"1em"}}>
<CarComponent car={car} imagePath={carImages.filter(image=>image.car.id===car.id)[0].imagePath}></CarComponent>

</Grid.Column>
))}
</Grid.Row>

</Grid>
</div>
);
}

获取所有汽车图像请求URL:http://localhost: 8080/api/图片/getAll

获取所有汽车图像响应体:

{
"success": true,
"message": null,
"data": [
{
"id": 26,
"imagePath": "http://res.cloudinary.com/dp39jsge0/image/upload/v1629406293/hx80jyfrus88tar0psq4.png",
"createdAt": "2021-08-19",
"car": {
"id": 1,
"modelYear": 2017,
"dailyPrice": 600,
"description": "A6 2.0TDI QUATTRO EDITION",
"brand": {
"id": 2,
"name": "Audi"
},
"color": {
"id": 8,
"name": "Beyaz"
},
"busy": false
}
},
{
"id": 27,
"imagePath": "http://res.cloudinary.com/dp39jsge0/image/upload/v1629406541/dynoc7dnjcbns0mv2y1m.png",
"createdAt": "2021-08-19",
"car": {
"id": 2,
"modelYear": 2018,
"dailyPrice": 400,
"description": "ALFA ROMEO GIULIETTA 1.6 JTD PROGRESSİON 120 HP",
"brand": {
"id": 1,
"name": "Alfa Romeo"
},
"color": {
"id": 9,
"name": "Gri"
},
"busy": false
}
},
{
"id": 28,
"imagePath": "http://res.cloudinary.com/dp39jsge0/image/upload/v1629406744/fmvdbmqaennil4ptdyoc.png",
"createdAt": "2021-08-19",
"car": {
"id": 3,
"modelYear": 2018,
"dailyPrice": 550,
"description": "BMW 320 DİZEL OTOMATİK-EDITION M SPORT",
"brand": {
"id": 3,
"name": "BMW"
},
"color": {
"id": 10,
"name": "Kırmızı"
},
"busy": false
}
},
{
"id": 29,
"imagePath": "http://res.cloudinary.com/dp39jsge0/image/upload/v1629406930/dq4htj3rrdjlbpiqa8iq.png",
"createdAt": "2021-08-20",
"car": {
"id": 4,
"modelYear": 2016,
"dailyPrice": 700,
"description": "C180 COUPE",
"brand": {
"id": 10,
"name": "Mercedes - Benz"
},
"color": {
"id": 11,
"name": "Lacivert"
},
"busy": false
}
}
]
}

刷新页面几次:汽车列表的示例

Answer 1

carImages的初始值必须为array，不能为object。

const [carImages, setCarImage] = useState([]);

注意初始值:[]，而不是{}

第二个错误:

您需要检查filter的结果，因为当getCars()在getCarImages()之前返回时，filter返回一个空数组，或者如果某些汽车没有任何图像。另外，为了摆脱数组，您需要使用find而不是filter，因为您希望得到单个结果。

export default function CarsList() {

const [cars, setCars] = useState([]);
const [carImages, setCarImage] = useState([]);
useEffect(() => {
let carImageService = new CarImageService();
carImageService
.getCarImages()
.then((result) => setCarImage(result.data.data));

}, []);
useEffect(() => {
let carService = new CarService();
carService.getCars().then((result) => setCars(result.data.data));
}, []);
return (
<div>
<Grid columns={3} >
<Grid.Row>
{cars.map((car) => {
let image = carImages.find(i=>i.car.id===car.id);
return 
<Grid.Column style={{marginBottom:"1em"}}>
<CarComponent car={car} imagePath={image === undefined ? undefined :image.imagePath}></CarComponent>

</Grid.Column>
})}
</Grid.Row>

</Grid>
</div>
);
}