[英]How to Map and Filter in Reactjs
carModel:
[
{_id : A, title : 2012},
{_id : B, title : 2014}
],
car: [{
color :'red',
carModel : B //mongoose.Schema.ObjectId
},
{
color :'black',
carModel : B //mongoose.Schema.ObjectId
}
]
在這里我在汽車的carModel上添加carModel ID並嘗試在我的反應頁面上進行過濾
car.map(item=>
<p>{item.color}</p>
<p>{carModel.map(model=> model.filter(model._id == item.carModel ? model.title : null)}
)
我想在頁面上顯示carModel,這里上面的代碼不起作用,我相信這不是執行此操作的確切方法,請糾正我
您可以使用以下內容:
car.map(item=> {
const filteredModels = carModel.filter(model => model._id === item.carModel);
return (
<div>
<p>{item.color}</p>
{filteredModels.map(model => <p>{model.title}</p>)}
</div>
);
})
您需要像這樣return
您的元素以使其起作用。 還用div
或其他東西包裝元素
car.map(item=>
return (<div>
<p>{item.color}</p>
<p>{carModel.map(model=> model.filter(model._id == item.carModel ? model.title : null)}
</div>)
)
filter方法的callback參數是一個函數,您需要在map函數中返回一個元素,因此;
car.map(item=> {
return (<div>
<p>{item.color}</p>
{carModel.filter(model => model._id === item.carModel).map(model => <p>{model.title}</p>)}
</div>);
})
car.map(item=> {
return (
<p>{item.color}</p>
{
carModel.filter(model => model._id === item.carModel)
.map(m => <p>{m.title}</p>)
}
);
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.