javascript - 将过滤器应用于 React 数组并显示过滤后的结果
问题描述
我正在尝试过滤用 React Js 编写的数组,但到目前为止,我一直没有成功收到未定义的错误。我想过滤一些值低于 10 的图像。
我尝试应用过滤器的方式看起来像:
{this.images.filter((image:any={}) => image.value < 10)}
但有些不对劲。
我的过滤器有什么问题以及如何编写它以获得有效的代码?
export class somePageImages{
images: any[] = [
{ img: 'http://www.someimage.com/', value: 4, title: 'Image 1', description: 'A description 1' },
{ img: 'http://www.someimage.com/', value: 6, title: 'Image 2', description: 'A description 2' },
{ img: 'http://www.someimage.com/', value: 10, title: 'Image 3', description: 'A description 3' },
]
render() {
return (
<Host>
<ol>
{ this.images.map((image:any={}) =>
<li>
<img src={image.img}></img>
<h1>{image.title}</h1>
<p>{image.description}</p>
</li>
)}
{this.images.filter((image:any={}) => image.value < 10)}
</ol>
</Host>
);
}
}
解决方案
I had to put the filter in a different position to work properly:
this.images.filter((image:any={}) => image.value < 50).map((image:any={})
This way it's working properly without any undefined
error
推荐阅读
- javascript - 表格单元格内的引导日期选择器未正确显示
- python - 在 `pipenv install` 之后使用 `pipenv shell` 会产生“已激活 UNKNOWN_VIRTUAL_ENVIRONMENT 的外壳”。
- jquery - Ajax 按类别过滤帖子
- css - 如何在窗口调整大小时更改弹性顺序?
- javascript - 来自 CosmosDB JavaScript 的 Azure 函数更改源
- django - Django 2.2.4 无法提供我的静态文件
- javascript - React+ Redux 的外部插件架构
- c++ - C++ 未解析的外部符号
- typescript - 属性的实例类型是实例本身的构造函数,打字稿
- powershell - 为所有用户提供在 Active Directory 中编辑他们自己的特定属性的能力