score:0
You need to check if you component is mounted now. You can create trigger mounted
in your state and manage it in lifecycles methods.
constructor(props) {
super(props);
this.state = { mounted: false };
}
componentDidMount() {
this.setState({ mounted: true });
}
componentWillUnmount() {
this.setState({ mounted: false });
}
componentWillReceiveProps(nextProps){
if(this.props.totalVehicles !== nextProps.totalVehicles &&
this.state.mounted){
this.setState({animation: "cartCount"}, () => setTimeout(() =>
this.setState({animation: null}), 1000));
}
}
score:0
Instead of using state "mounted" try using instance variable "mounted":
constructor(props) {
super(props);
this.mounted = false;
}
componentDidMount() {
this.mounted = true;
}
componentWillUnmount() {
this.mounted = false;
}
componentWillReceiveProps(nextProps){
if(this.props.totalVehicles !== nextProps.totalVehicles &&
this.mounted){
this.setState({animation: "cartCount"}, () => setTimeout(() =>
this.setState({animation: null}), 1000));
}
}
score:1
score:2
Although this is an old questions, i'll answer it for future references.
When using setState
(which is asynchronous) via setTimeout
, you have to remember to clear the timeout on componentWillUnmount
.
Otherwise, you might get to situations in which the setState
is called after the element has already unmounted.
Source: stackoverflow.com
Related Query
- Set state in lifecycle method React JS
- Set Redux State in handleSubmit method of Formik React form
- useState React Hook set method does not update state immediately in onChange()
- Why does calling react setState method not mutate the state immediately?
- Set loading state before and after an action in a React class component
- set initial react component state in constructor or componentWillMount?
- How to set state of response from axios in react
- Set React component state from outside of component
- How to set React component state and props from browser
- How can I set initial React state from API data?
- how to set state array using react hooks
- What is correct lifecycle method in React 16.3 to update canvas from props?
- How to correctly set initial state in React with Typescript without constructor?
- React: If you set state in a request animation frame will react schedule rendering on the animation frame?
- Why set a React Component's state outside of the constructor?
- How to TEST async calls made in componentDidMount that set the state of React Component
- Activity needs to be set if initial lifecycle state is resumed
- Set state with React Shallow Rendering
- Set a dictionary inside a state dictionary in React
- Set dynamic key in state via useState React hooks
- How to make React input onChange set state only after onChange stops firing for set time?
- How to mock a React component lifecycle method with Jest and Enzyme?
- React Hooks : Why is it bad practice to pass the set state funcitons to a Child Component?
- How to test React state after calling a component method that updates state - using Enzyme
- Set multiple state values with React useState hook
- Any reason for a react state hook set callback to fire twice?
- Can't set props to state using useState React
- What is the default implementation for "shouldComponentUpdate" lifecycle method in React components
- React infinite rerender, useEffect issue, no set state triggered
- Is there a generic way to set state in React Hooks? How to manage multiple states?
More Query from same tag
- What data structure should I use if these data would need prices for each?
- Why Webpack parse less style used by a library in the node_modules and how to prevent that
- Default function parameter value from React component state
- Access data already fetched with react query in other component
- How to make 2 window event listener in react js
- Using a Custom React based Modal, how can I pass a dynamic triggering function so I can re-use the component?
- React setState for multi level state object
- How to filter the states object with a given value in react
- How to fix type inference for a component variable in a jest Mount test built with reactjs?
- App crashes while reloading the page with double param
- Using pointers in Redux store
- Apache web server doesn't allow me to refresh on /about but on localhost its working fine
- Type 'Dispatch<any>' is not assignable to type '() => null'.ts(2322)
- React: undefined the state of `this.setState` instantly
- How do I style react-table filter input field?
- useEffect() vs setTimeout() for side effects
- Can't pass a head of a method to event handling in React markup
- React tsx nested array print data in console but not in HTML
- Reactjs, Rxjs and mouse events
- webpack umd lib and external files
- Function not returning component after form submit in React
- ReactJS with useRef: focusing a toggle-able form
- How to get an element height in react js with out using any pulgin
- Search bar stopping props from changing
- React testing library snapshot testing cannot read store property
- gulp browserify bundle time takes too long
- setState in multiple fetch requests
- AG-Grid Distinguish Row Selections
- How to return an array of objects from a collection, to state in react using meteor?
- Formatting React Stack Trace in the browser as a component?