score:6
yes the problem is the settimeout inside the settimeout function "this" refer to the function itself: so the solution is the typical var that = this
:
navopen() {
this.setstate({
navstatus: "navshow",
navlinesshow: false
});
if ( this.state.visible === false) {
var that = this;
settimeout(function (){
that.setstate({
visible: true
});
}, 3000);
}
score:2
another solution in addition to @pinturic's solution is to use es6 arrow functions. if you're using es6/babel, etc., you can use an arrow function to bind to the lexical this
.
navopen() {
this.setstate({
navstatus: "navshow",
navlinesshow: false
});
if (!this.state.visible) {
settimeout(() => this.setstate({visible: true}), 3000);
}
}
score:3
it is because this
doesn't have the correct value due to runtime binding. you need to use lexical binding. the best solution is to use es6
arrow functions () => {}
which provides lexical binding of this value. even with the settimeout()
the lexical binding of this would fix the error you are getting
constructor() {
super();
this.state = {
visible: false,
navlinesshow: true
};
}
navopen = () => {
this.setstate({
navstatus: "navshow",
navlinesshow: false
});
if ( this.state.visible === false) {
settimeout(() => {
this.setstate({
visible: true
});
}, 3000);
}
}
Source: stackoverflow.com
Related Query
- setState function in reactjs is not setting state. How to overcome this problem?
- ReactJS Array.push function not working in setState
- setState in reactjs inside success function not setting state
- ReactJS - setState is not a function
- reactjs setState is not a function on a JSON call
- ReactJS this props is not a function
- setState not a function after binding this
- reactjs - this is not a function error on upgrade
- Why does adding/removing curly braces in this arrow function cause the text to not display for a ReactJS component?
- What is the problem with this reactjs setState function code?
- Is this method a proper way to avoid .map is not a function in ReactJS
- How to not repeat this same function in ReactJS
- ReactJS onClick function does not work, TypeError: this is null
- make two decimal value in reactjs but getting this error TypeError: String(...).toFixed is not a function
- reactjs gives me this error: TypeError: this.state.coords.map is not a function
- ReactJs CreateClass is not a function
- TypeError: Object(...) is not a function reactjs
- ReactJS with ES6: this.props is not a function when I communicate two components
- How can I define TypeScript type for a setState function when React.Dispatch<React.SetStateAction<string>> not accepted?
- ReactJS giving inst.render is not a function error
- Reactjs setState arrow function syntax
- ReactJS toLowerCase is not a function
- ReactJS Test - fsevents is not a function
- ReactJS SetState not rerendering
- Why is this returning the error .contains() is not a function
- React setState inside of a function this is undefined
- ReactJS state not updated In setState callback
- Reactjs this.setState is not a function error
- componentDidMount seems not to be called after setState in ReactJS
- React Arrow Function Component - setState is not defined
More Query from same tag
- how to convert multiple else if statements to ternary operator
- Input not being read properly in React function (no JSX)
- setSinkId only works with <audio> and not new Audio()
- TypeError: getItem is not a function when testing a component with node module hooks
- How to separate input field values in React?
- React: Caret icon keeps moving outside of dropdown menu whenever page is resized to iPad or smaller
- React Styled Components selector for self AND children?
- How to fix image within a flexbox, ignoring containers height?
- Reading GET in REACT serves NODEJS
- How can modify an object of a deep nested array of objects with lodash?
- Material-UI: TextField: react-addons-css-transition-group breaks with multiline TextFields
- Adding ReactJS to vanilla JavaScript
- How to map through different jsons and get data from an array
- How do I use onChange function after getting data from redux
- Framer-motion: onAnimation callbacks not called on child elements
- Return books that contain specific genres
- Jest "Could not locate module" if any dependency has "src" in path
- Form data Error Cannot set headers after they are sent to the client
- Why won't the form state visibly change within the submit button using react form hook?
- How to loop in useEffect and setState
- Map creates only one li - React
- "dispatch" is not a function error
- How to fetch using axios when the api comes from a state via reducer?
- slick slider 1 image moves down
- I keep getting (Cannot read property 'Date' of undefined)
- ALT Parsing error: Unexpected token (React)
- React use componentWillReceiveProps to re-render the component
- How to pass value to rootSaga?
- Create custom hook without passing props in React with Typescript
- Is there way to hide/show form field in react in other component or js file just with field ID or name?