基于 React Router 过滤映射对象

Question

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

如果我手动将它设置为 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>
)
 }
}

Answer 1

我认为，这是一个类型不匹配的问题，this.props.match.params.reviewId 将 return 一个 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>
)

基于 React Router 过滤映射对象

filtering a mapped object based on React Router

javascript

reactjs

react-router

react-router-v4