反應：無法處理事件異步功能

Question

當我嘗試觸發事件onClick在h2第二個文件上的異步功能時，我遇到了問題。 我不知道問題在哪裏。我發現一個類型錯誤TypeError: Cannot read property 'props' of undefined. 只要看看代碼。

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}/> 

) 
} 
}) 

將道具中的這個函數傳遞給另一個啞組件。有一個

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> 

) 
} 

你有一些想法如何獲取有關事件的數據嗎？ 可能我不知道

Answer 1

getAngularData和getAngularContributors不知道什麼this的意思。你需要做的就是在constructor這樣綁定它：

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

componentDidMount(//... rest of code