2017-10-04 19 views
0

lodash의 _.find 함수를 사용하여 첫 번째 배열 만 출력하려고합니다. 이것은 내가 console.log 할 때 작동합니다. 그러나 렌더링 결과를 JSX에 표시 할 수 있도록 렌더링에 입력하는 데 어려움을 겪고 있습니다.React JS 로다시를 사용하여 배열 항목을 렌더링하십시오.

나는 배열을 추출하는 수많은 방법을 시도했지만 성공적인 결론을 내리지 못했습니다. 문제를 해결하고이를 수행하는 방법을 설명하는 모든 도움을 주시면 대단히 감사하겠습니다.

두 개의 const (이벤트)가 동시에 실행되지 않고 맨 위가 실행하려고 시도하고 두 번째가 작동하지만 두 배열을 반복하여 화면에 두 세트의 정보를 표시합니다.

const cat = _.find(this.state.event, function(o) { return o.id == 1; }); 
    console.log(cat); 

    //const events = _.find(this.state.event, ['id':1] (=> { 
    const events = this.state.event.map((item, i) => { 
    return <div> 
    <div className="center-cards margin-top margin-bottom test-cardSecond"> 
     <div className="text-center margin-top"> 
     <h1 className="card-heading">Scottish Conference 2017</h1> 
     <div className="card-sub"> 
      <div>{item.description}</div><br /> 
      {/* <div>Sale Date</div><div>{item.sales_end_time} - {item.sales_start_time}</div><br /> */} 
     </div> 
     </div> 
    </div> 
     <div className="belowBoxTestSecond"> 
     <h1 className="bodyHeading">Example</h1> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <br /><br /> 
     Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. <br /> 
     Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br /> 
     Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <br /><br /> 
     Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
     </div> 
    </div> 
    }); 
+0

고양이는 개체입니다. 자체적으로 렌더링하지 마십시오. cat의 id를 출력 할 점 표기법'{cat.id} '를 사용하여 cat의 필드를 출력 할 수 있습니다. 중괄호가 필요합니다. – fungusanthrax

답변

1

lodash.find documentation에 따르면, 속성 값과 일치하도록 속기를 사용하는 올바른 방법은 다음과 같습니다

_.find(myArray, ['property', value]); 

또는

_.find(myArray, {'property': value}); 

그래서 코드가 있어야한다 :

const events = _.find(this.state.event, ['id', 1 ]).map(item => { 

});