2

Im trying to add step to realtime database firebase. When I add the step, it works in the database but then the modal closes and I dont have any error but the modal closes without any reason

I think the problem is when I call the firebase to update it (in addTodo function), but I have no ideas why.

TodoModal.js :

  componentDidMount = async () => {
    this.mounted = true;
  };

  compunentWillUnmount = () => {
    this.mounted = false;
  }

  addTodo = async () => {
    if (this.state.newStep !== "") {
       try {
        await firebase
          .database()
          .ref("Tasks")
          .child(firebase.auth().currentUser.uid).child(firebase.auth().currentUser.uid)
          .child(this.props.task.taskname)
          .child("Steps")
          .child(this.state.newStep)
          .update({ title: this.state.newStep, status: false, dateAdd: date });
        this.props.addStep({ title: this.state.newStep, status: false, dateAdd: date }); 
        if (this.mounted) {
          this.setState({ newStep: "" });//to reinitialize the newStep field
        }

      } catch (error) {
        console.log(error);
      } 
    } else {
      Alert.alert("","field is required");
    }
  };
  };




  render() {
    return (
            <View>
              <TextInput
                onChangeText={(text) => this.setState({ newStep: text })}
                value={this.state.newStep}
              />
              <TouchableOpacity
                onPress={() => this.addTodo()}
              >
              </TouchableOpacity>
            </View>
    );
  }
}

);

TodoTask.js :

render() {
    const task = this.props.task;
    return (
      <View>
        <Modal
          animationType="slide"
          visible={this.state.showTaskVisible}
          onRequestClose={() => this.toggleisModal()}
        >
          <TodoModal task={task} closeModal={() => this.toggleisModal()} />
        </Modal>
       </View>
      )
user123456
  • 171
  • 11

1 Answers1

0

That error happens when an async function ends and the component that triggered that function was unmounted, so the result of the async function tries to update the state of something that is not there anymore.

Usually, to prevent this, you have to either reject the promise OR check if the component is still mounted before trying to modify its state.

You could keep track of the mounted state doing something like

componentDidMount = () => {
  this.mounted = true;
}

compunentWillUnmount = () => {
  this.mounted = false;
}

then you can check if this.mounted before trying to change the state.

arieljuod
  • 15,460
  • 2
  • 25
  • 36
  • I added it but the modal still closing without reason.. – user123456 Nov 21 '21 at 11:12
  • I don't see any modal or code related to closing it in your question. – arieljuod Nov 21 '21 at 13:30
  • I think there are still some missing pieces, are you calling `closeModal` somewhere? is `onRequestClose` being called somehow? you should put all the relevant code. Also, are you still having the error about the state update for an unmounted component? I see you edited the original question saying that you don't get any error, you shouldn't do that, it makes it difficult to follow – arieljuod Nov 21 '21 at 17:27
  • Thank for the tips, I dont call onRequestClose in TodoModal.js and if I put the update database part in comment, there is no problem.. Like its something because of the db.. – user123456 Nov 21 '21 at 18:35