我是新手做出反应,我正试图从randomuserapi中拉出并显示数据。我已经进行了api调用但是当我运行我的应用程序时,我收到以下错误:
./src/App.js
Line 45: 'getData' is not defined no-undef
这是我的代码如下:getData()方法是我进行api调用的地方。现在,在ComponentDidMount中调用该方法。
我还将getData()绑定到我的构造函数,但我仍然得到上面的错误。
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
people: []
}
this.getData = this.getData.bind(this);
}
getData() {
const promise = fetch('https://randomuser.me/api/?results=20')
.then(response => {
if (response.status >= 400) {
throw `Response Invalid ( ${response.status} )`;
return;
}
return response.json();
})
.then(({results}) => {
return results;
})
.catch(error => {
console.log(error);
});
return promise;
}
ComponenDidMount() {
getData()
.then(data => {
this.setState({
people: data
});
});
}
render() {
return (
<div>
<p>{this.state.people.results[0].gender}</p>
</div>
);
}
}
export default App;
我也在使用Github的create-react-app。请帮助一些帮助。
谢谢!
当你引用定义的方法时,你需要说this
所以:
componenDidMount() {
this.getData()
.then(data => {
this.setState({
people: data
});
});
}
在调用函数时尝试添加this.
。在this.getData()
内的componentDidMount