score:5
you're using function()
in your promise chain, this will change the scope for this
. if you're using es6 i suggest you use the arrow function to maintain the class scope. example:
you're using
axios.get(app_url, { params: params})
.then(function(response) { // this resets the scope
this.setstate({
videos:response
})
})
try using arrow functions:
axios.get(app_url, { params: params})
.then((response) => {
this.setstate({
videos:response
})
})
score:0
you can assign the current context this
to a variable, also be consistent either use es5 or es6.
apicall(term) {
const params = {
part: 'snippet',
key: app_key,
q: term,
type: 'video'
};
const _this = this;
axios.get(app_url, { params: params})
.then((response) => {
_this.setstate({
videos: response
});
})
.catch((error) => {
console.error(error);
});
}
score:0
it is due to scoping in your api call. the value of this
is different within your response
callback in your promise chain. there are two ways to solve this.
you could set a variable referencing this
at the beginning of your apicall
method.
apicall(term){
const that = this;
const params = {
part: 'snippet',
key:app_key,
q:term,
type: 'video'
};
axios.get(app_url, { params: params}).then(function(response) {
that.setstate({
videos:response
});
}).catch(function(error) {
console.error(error);
});
}
or else you can use es6 arrow functions, which maintain the original scope, like this:
axios.get(app_url, { params: params}).then(response => {
this.setstate({
videos:response
});
})
score:0
you also may need to add this.apicall = this.apicall.bind(this)
before the this.apicall('surfing');
on your constructor
method. this will bind the scope of apicall
to the scope of the react component.
more here: https://facebook.github.io/react/docs/handling-events.html
also, remove this.apicall('surfing');
from the constructor
and put it into a componentdidmount
function, the constructor should not be used for execution.
Source: stackoverflow.com
Related Query
- ReactJS Cannot read property setState of undefined
- TypeError: cannot read property setState of undefined
- react setstate TypeError: Cannot read property 'setState' of undefined
- Cannot read property setState of undefined
- ReactJs displays error Cannot read property setState of undefined with Axios form submission
- Cannot read property setState of undefined while trying to set the state in my React project
- Cannot read property of setState of undefined REACT
- Cannot read property 'setState' of undefined when setState for coordinate
- React Cannot read property setState of undefined in .then() even using arrow function
- Cannot read property 'setState' of undefined when using setState inside function()
- React - uncaught TypeError: Cannot read property 'setState' of undefined
- Line 0: Parsing error: Cannot read property 'map' of undefined
- react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined
- Error : Cannot read property 'map' of undefined
- React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined
- Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)
- React enzyme testing, Cannot read property 'have' of undefined
- Cannot read property 'history' of undefined (useHistory hook of React Router 5)
- React - TypeError: Cannot read property 'props' of undefined
- React-Router - Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined
- Redux TypeError: Cannot read property 'apply' of undefined
- React Router: Cannot read property 'pathname' of undefined
- React Typescript: Line 0: Parsing error: Cannot read property 'name' of undefined
- reactjs Cannot read property 'keys' of undefined
- TypeError: Cannot read property 'contextTypes' of undefined
- TypeError when using React: Cannot read property 'firstChild' of undefined
- TypeError: Cannot read property 'prepareStyles' of undefined
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- Cannot read property ‘params’ of undefined (React Router 4)
- Cannot read property 'string' of undefined | React.PropTypes | LayoutPropTypes.js
More Query from same tag
- How to convert a time to user local timezone in javascript
- How to simply nested ternary logic in react while rendering different component
- Parsing error: Unexpected token when adding a conditional in react
- React reading from firebase, getting error
- GET http://localhost:5000/error 404 (Not Found)
- react-hook-form handling server-side errors in handleSubmit
- Can't figure out how to pass props to components when using React Router v5 and Redux
- onDeviceReady event listener in react component
- How to prevent the submit button from reloading the page, while keeping default form warnings?
- Where to download the latest version of the react-transition group dependency?
- Changing logo in gatsby theme
- React JS input type text field default value should be changed
- React Navigation, How do I test a the path of a Navlink?
- Facebook Flow - how to return a type casted property from deeply nested object?
- Return a word from a words array when the time is the one from the time array. Javascript - React
- page crash error because of the delay in data
- How to use dependency injected component in React (TypeScript)
- How do i setState in multidimensional array of objects via functional component
- Adding object to nested array using firebase, nextjs
- Issue with URL params in react-router
- ReactFire isn't loading data from Realtime Database
- React-table package: formatting float as currency
- How to handle image required field in case of update, react js
- Uncaught ReferenceError: liferay is not defined
- Nuclide debugger with node and babel?
- How to populate form input controls from json data in reactjs?
- I want to be redirected to a file.js after when i am logged in
- Update apollo client with response of mutation
- Proper way of passing function from one component to other on React typescript
- Init UseState value from UseContext value