는 돌아 오는 그들을 매핑 및 소품으로 기능을 전달하려고하지만 약속 오류

Question

내 REDUX 썽크에서 데이터를 얻고을 받고 바로 내 부모 구성 요소

function mapStateToProps (state) { 
    return { 
    data: state.myarticles.data 
    } 
} 
export default connect(mapStateToProps, actions)(MyArticlesView) 

에 연결 배열, 객체의 배열을 반환 반작용 동일한 구성 요소 I는 어레이의 모든 구성 요소를 나열 함수를 발생이

{this.props.data && this.props.data.results && 
this.props.data.results.map(this.renderArticles)} 

이

renderArticles (article, i) { 
return (
    <Article key={i} title={article.title} status={article.status} updated={article.updated_at} id={article.id} /> 
) 

}

그러나 나는 또한이

renderArticles (article, i) { 
return (
    <Article key={i} title={article.title} status={article.status} updated={article.updated_at} id={article.id} onDelete={this.handleDeleteClick} /> 
) 

}

과 같을 것이다, 그래서 내 부모 구성 요소에서 함수 이름과 그 기술 구성 요소에 onDelete 소품을 추가 할 수 있지만 그것은 나를 던져 오류

Uncaught (in promise) TypeError: Cannot read property 'handleDeleteClick' of undefined 

나는 그 아이의 COMPON에 전달하는 방법을 그지도 기능 this.handleDeleteClick에 보이지 않는 것을 알고 있지만 아무 생각이 없다 =>) (`

this.props.data.results.map(this.renderArticles.bind(this))} 

Answer 1

당신은 다음과 같이 될지도 기능에 반응 에 기능를 구성 요소의 예를을하지 의미 this을 바인드해야 this.handleDeleteClick` 대신 this.handleDeleteClick()을 사용하십시오. `renderArticles` 메소드에서 컨텍스트를 잃어 버리는 것처럼 보입니다.