反应:无法处理事件异步功能
问题描述:
当我尝试触发事件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>
)
}
你有一些想法如何获取有关事件的数据吗? 可能我不知道
答
getAngularData
和getAngularContributors
不知道什么this
的意思。你需要做的就是在constructor
这样绑定它:
constructor(props) {
super(this);
this.getAngularData = this.getAngularData.bind(this);
this.getAngularContributors = this.getAngularContributors.bind(this);
}
componentDidMount(//... rest of code
看到https://*.com/a/41272784/4435270 – Bill