Can’t call setState on a component that is not yet mounted

by

This warning that you are getting is because you are setting a reference to clickMe method in the constructor, which is then using the setState().

constructor (props) {
    super(props)
    this.state = {
       initial: 'state',
       some: ''          
    }
   this.clickMe = this.clickMe.bind(this);   <--- This method
  }

 clickMe () {
   this.setState({
     some: 'new state'    <-- the setState reference that is causing the issue
   })
  }

Try removing the this.clickMe = this.clickMe.bind(this) from constructor and do it in a lifecycle method like componentWillMount() or ComponentDidMount(). For react 16 and above you can use the componentWillMount method with “SAFE_” prefix. [SAFE_componentWillMount]

 componentWillMount() {
      this.clickMe = this.clickMe.bind(this);
 }

clickMe () {
   this.setState({
     some: 'new state'    
   })
  }

More Related Contents:

  1. How to add function in JSX?
  2. Why is setState in reactjs Async instead of Sync?
  3. React / JSX Dynamic Component Name
  4. How do I render components with different layouts/elements using react-router-dom v6
  5. Update style of a component onScroll in React.js
  6. Rendering React Components from Array of Objects
  7. Where can I make API call with hooks in react?
  8. How to perform debounce?
  9. React input defaultValue doesn’t update with state
  10. onClick doesn’t render new react component.
  11. How to assign refs to multiple components
  12. Access Control Origin Header error using Axios
  13. Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
  14. Warning: Function components cannot be given refs
  15. How do I reload a page with react-router?
  16. Using JavaScript Axios/Fetch. Can you disable browser cache?
  17. React.js ES6 avoid binding ‘this’ to every method
  18. React Native: Using lodash debounce
  19. Save data in a special order when click on button
  20. Environment variables not working (Next.JS 9.4.4)
  21. Axios posting params not read by $_POST
  22. Reactjs – Setting State from props using setState in child component
  23. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  24. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  25. React, losing saved data in localStorage with useEffect after page refresh
  26. Converting Responsive Grid Layout to Plotly Dash
  27. How to parse html to React component?
  28. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  29. State not getting updated when calling the related setState in React
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment