React: cant handle async function on event

Question

I got a problem when I try to trigger async function on event onClick at the second file in h2. I don't know where is the problem. I catch error with a type TypeError: Cannot read property 'props' of undefined. Just take a look at the code.

import React from 'react'
import {AngularIntroduce} from './../components/AngularIntroduce'
import {connect} from 'react-redux'

export default connect(
state => ({
    angularData: state.angularData,
    angularReposList: state.angularReposList
}),
dispatch =>  ({
    success: data => dispatch({
        type: 'angularData/FETCH__SUCCESS',
        data: data
    })

})

)(class angularRepoList extends React.Component {



componentDidMount() {

    this.getAngularData()


}

async getAngularData() {
    try {
        const response = await             
fetch('https://api.github.com/orgs/angular');
        const got = await response.json();
        await this.props.success(got)
        console.log(this.props.success)
    }
    catch (err) {
        throw console.log('fetch failed', err);
    }
}

async getAngularContributors() {
    try {
        const response = await 
fetch('https://api.github.com/orgs/angular');
        const got = await response.json();
        await this.props.success(got)
        console.log(this.props.success)
    }
    catch (err) {
        throw console.log('fetch failed', err);
    }
}





render() {


    const angularContributors = this.getAngularContributors
    const angularData = this.props.angularData.data

    console.log(this.props.angularData)
    console.log(angularContributors)

return (
 <AngularIntroduce
     showContributors={angularContributors}
     angularBlog={angularData.blog}
     angularReposCount={angularData.public_repos}
     angularAvatar={angularData.avatar_url}/>

)
}
})

In pass this function in props to another dumb component. There is a

import React from 'react'

 export const AngularIntroduce = (props) =>{
return (
    <div className="container">
       <header>
           <img src={props.angularAvatar} alt=""/>
<h1>Count of Repositories {props.angularReposCount}</h1>
           <h1><a href={props.angularBlog}>Look at their BLOG, there is 
a lot of interesting materials!</a></h1>
<h2 onClick={() => props.showContributors}>Take a look at their contributors!</h2>
//Here i can change it to only props.showContributors that works but i got a error like that fetch failed 
//TypeError: Cannot read property 'props' of undefined
           <HandleClick/>
       </header>
    </div>

)
}

Do u have some idea how to fetch that data on event? May I don't know something

see https://stackoverflow.com/a/41272784/4435270 – Bill Oct 07 '17 at 13:57 — Bill, Oct 07 '17 at 13:57

score 2 · Answer 1 · answered Oct 07 '17 at 13:56

getAngularData and getAngularContributors do not know what this means. What you will need to do is bind it in the constructor like so:

constructor(props) {
    super(this);
    this.getAngularData = this.getAngularData.bind(this);
    this.getAngularContributors = this.getAngularContributors.bind(this);
}

componentDidMount( //... rest of code

React: cant handle async function on event

1 Answers1