는 라우터

Question

내가 내 라우터에 :reviewId로 내지도 배열을 필터링하기 위해 노력하고있어 (V4) URL 반응에 따라 매핑 된 객체를 필터링 나는 {review.items가 routeId 매개 변수를 수동으로 설정하면 코드가 작동

.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는 01를 반환합니다값이고, id는 integer 값입니다.

따라서 === 대신 ==을 사용하십시오. 이와 같이

:

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

이유 :=== 검사 값을 모두 입력. filter 내부

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

하고 결과를 확인합니다

이 사용을 확인합니다.

이 시도 :

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