將過濾器應用於 React 數組並顯示過濾后的結果

Question

我正在嘗試過濾用 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>
    );
  }

}

Answer 1

我必須將過濾器放入不同的 position 才能正常工作：

this.images.filter((image:any={}) => image.value < 50).map((image:any={})

這樣它就可以正常工作而沒有任何undefined的錯誤