Error While setting a state:“Can't call setState on a component that is not yet mounted.” React-Native

programming
1

I am trying to setState of my object but i am getting this error “Can’t call setState on a component that is not yet mounted…” My approach is i want to set the value which is in variable “location” to the state “buses”. I am able to get the value from another class which is in variable but i am not able to set it. Here’s my code

import React, { Component } from "react";

export default class SecondClass extends Component{
  constructor (props) {  
    super(props)
    this.state={
      buses:'',
    } 
  }
  getValues=()=>{
    let location1=global.__classAThis.state.From \\Value is in this variable 
    this.setState({buses: location1}) \\but can't set the state here
    console.log(location1)
 }
}
2

is anybody here to figure out this issue

3

Your code seems valid. Try adding this code that will only run when the component is mounted:

  componentWillMount() { 
    this.mounted = true; 
  }

  getValues=()=>{
    if (this.mounted) {
      let location1=global.__classAThis.state.From \\Value is in this variable 
      this.setState({buses: location1}) \\but can't set the state here
      console.log(location1)
    }
 }

Does this fix it?

4

You should use componentDidMount :wink: but there’s also a built-in isMounted already (if its still there), though its considered an anti-pattern.

@Sukhwinder_Saini Kirupa’s solution helps avoid the error, but it sounds like you’ll still have the problem of this not working because you’re trying to use it (somehow?) before or after the component is mounted or unmounted. You need to make sure the component is on the display list (mounted) before calling setState or it will fail. Given your use of global.__classAThis, it looks like you’re already doing some unconventional things which is going to make your life difficult. You might need to take a step back and try to approach things in a more react-like manner.

5

@kirupa @senocular
kirupa thanks for looking into my problem. As @senocular was saying that code just avoid my error but i still didn’t get my value. I am new to react-native so i will elaborate my whole code

FistClass. js
This is my first file where the user enter value in then onPress those value get saved in the state

import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import styles from "./appstyles";
import SecondClass from "./SecondClass"

export default class ClassOne extends Component{
  constructor (props) { 
    super(props)
    this.callSecondClass=new SecondClass(props); 
    global.__classAThis = this; //with this can call the whole property of class from another class 
   
    this.state={
        From:'',
        To:'',
        FromStr:'',
        ToStr:''
    }
  }

 changeText=(From)=>{
  this.setState({From})

 }
 changeText1=(To)=>{
  this.setState({To})
 }

 onPress = ()=>{
   this.setState({FromStr: this.state.From})
   this.setState({ToStr: this.state.To})
   this.callSecondClass.getValues()
 }
  

render(){

return (
<View>
    <View style={styles.inputFields}>
    <TextInput placeholder="From" id="from" style={styles.fromField} onChangeText={this.changeText} />
    <TextInput placeholder="To" id="to" style={styles.toField} onChangeText={this.changeText1}/>
  <View style={styles.buttonStyle}>
  <Button
      title={"Click"}
      color="#f194ff"
      onPress={this.onPress}
      
  ></Button>
 </View>
    </View>
      </View>
   
);
}
}

SecondClass.js
Then in this class i store that “From” value in variable location1 and over there i face that setState error

import React, { Component } from "react";

export default class SecondClass extends Component{
  constructor (props) {  
    super(props)
    global.__classBThis = this;
    this.state={
      buses:'',

    }
  }

  getValues=()=>{
      let location1=global.__classAThis.state.From 
      this.setState({buses: location1})
      console.log(location1)
    }
 }}

IN this class i want to store From value then i want to process that in further function

6

When you extend Component, it means you’re creating a class that is meant to be a React component - a component you would use in JSX - not something you would instantiate yourself with new. And only when you component is mounted (used in JSX) will it have access to setState. If SecondClass isn’t meant to be a component, then you shouldn’t extend Component and can’t use setState. Instead you can simply store your state data in the class itself (even still using state) setting values there normally.

One of the reasons setState exists at all is to allow the component to know when it needs to render again when the state data has changed. But if you’re not using it as a rendered component, that becomes unnecessary.