濾波基於陣營路由器

Question

我試圖過濾我地圖由:reviewId陣列中我的路由器（V4）的URL映射對象

代碼工作，如果我手動設定到路由ID參數{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將返回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> 
)