基于 React Router 过滤映射对象 [英] filtering a mapped object based on React Router

查看：40
本文介绍了基于 React Router 过滤映射对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

路线

<路由精确路径="/reviews/:reviewId" component={Review}/>

json 数据

const 评论 = [{编号:'1'，猫:'电影'，项目: [{ 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' },],},{编号:'2'，猫:'音乐'，项目: [{ 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' },],},]导出默认评论

review.jsx

从'../Reviews/const'导入评论export default class Reviews extends React.Component {//eslint-disable-线路反应/首选无状态功能静态 propTypes = {匹配:React.PropTypes.node.isRequired，}使成为() {const revs = review.map(review =><div><div key={review.id}/>{review.items.filter(item => item.id === this.props.match.params.reviewId).map(item =><div className="单元格"><div key={item.id}><img src={item.img} alt={item.name}/><div>{item.text}</div>

,)}

,)返回 (<div>{this.props.match.params.reviewId}{转速}

)}}

解决方案

我认为，这是一个类型不匹配的问题，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 = review.map(review =><div><div key={review.id}/>{review.items.filter(item => {console.log(typeOf(this.props.match.params.reviewId), typeOf(item.id))返回 item.id == this.props.match.params.reviewId;}).map(item =><div className="单元格"><div key={item.id}><img src={item.img} alt={item.name}/><div>{item.text}</div>

)}

)

I'm trying to filter my map array by the :reviewId in my router(v4) url

the code works if I set it manually to the routeId parameter {review.items.filter(item => item.id === 2)`

and {this.props.match.params.reviewId} also displays the routeId parameter but putting them together doesn't display any results and no console errors.

Route 

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

json data

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>
)
 }
}

解决方案

I think, this is a type mismatch issue, this.props.match.params.reviewId will return a string value, and id is an integer value.

So instead of === use ==.

Like this:

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

Reason: === checks the value and type both.

To verify this use:

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

inside filter and check the result.

Try this:

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 过滤映射对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆