基于React Router过滤映射对象

时间:2017-04-25 10:23:19

标签: javascript reactjs react-router react-router-v4

我正在尝试通过路由器中的:reviewId过滤我的地图数组(v4)网址

如果我手动将其设置为routeId参数{review.items.filter(item => item.id === 2)`

,则代码可以正常工作

{this.props.match.params.reviewId}也会显示routeId参数,但将它们放在一起不会显示任何结果,也不会显示控制台错误。

路线

<Route exact path="/reviews/:reviewId" component={Review} />

json数据

const reviews = [
{
id: '1',
cat: 'film',
items: [
  { id: 1, name: 'Review 1', text: 'bla bla review 1', img: 'http://epn.tv/wp-content/themes/elecplay-2014/images/hexrotr/hexrotr_reviews_two_on.png' },
  { id: 2, name: 'Review 2', text: 'bla bla review 2' },
  { id: 3, name: 'Review 3', text: 'bla bla review 3' },
],
},
{
id: '2',
cat: 'music',
items: [
  { id: 1, name: 'Review 1', text: 'bla bla review 1', img: 'http://epn.tv/wp-content/themes/elecplay-2014/images/hexrotr/hexrotr_reviews_two_on.png' },
  { id: 2, name: 'Review 2', text: 'bla bla review 2' },
  { id: 3, name: 'Review 3', text: 'bla bla review 3' },
],
},
]
export default reviews

review.jsx

import reviews from '../Reviews/const'

export default class Reviews extends React.Component { // eslint-disable-
line react/prefer-stateless-function

  static propTypes = {
    match: React.PropTypes.node.isRequired,
  }

  render() {
    const revs = reviews.map(review =>
      <div>
    <div key={review.id} />
    {review.items.filter(item => item.id === this.props.match.params.reviewId)
    .map(item =>
      <div className="cell">
        <div key={item.id}>
          <img src={item.img} alt={item.name} />
          <div>{item.text}</div>
        </div>
      </div>,
    )}
  </div>,
)

return (
  <div>
    {this.props.match.params.reviewId}
    { revs }
  </div>
)
 }
}

1 个答案:

答案 0 :(得分:1)

我认为,这是一种类型不匹配问题,this.props.match.params.reviewId将返回string值,而id为integer值。

而不是===使用==

像这样:

item.id == this.props.match.params.reviewId

原因: ===检查值并输入两者。

验证此用途:

console.log(typeOf(this.props.match.params.reviewId), typeOf(item.id))

filter内并检查结果。

试试这个:

render() {
    const revs = reviews.map(review =>
      <div>
        <div key={review.id} />
        {
          review.items.filter(item => {
              console.log(typeOf(this.props.match.params.reviewId), typeOf(item.id)) 
              return item.id == this.props.match.params.reviewId; 
          })
          .map(item =>
            <div className="cell">
              <div key={item.id}>
                <img src={item.img} alt={item.name} />
                <div>{item.text}</div>
            </div>
            </div>
        )}
      </div>
)