i'm working on a react app
when run this function by infinite scroll i'll get error
Unhandled Rejection (TypeError): can't access property "country", this.props is undefined
async pageUpdater() {
let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey=myapi&page=${this.state.page}&pageSize=${this.props.pageSize}`;
this.setState({ loading: true })
await fetch(url).then(response => response.json()).then(data => {
this.setState({ articles: data.articles, totalResults: data.totalResults, loading: false })
})
}
You have to use the arrow function or need to bind the this with this function.
The JavaScript has the function scope and the this pointer is changed on the function scope.
For example-
const pageUpdater = async () => {
// your code here
}
or
You also could bind the this with the function at the component connstructor.
constructor() {
this.pageUpdater = this.pageUpdater.bind(this);
}
For more about this read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this