Estoy tratando de agregar un paso a la base de datos firebase en tiempo real. Cuando agrego el paso, funciona en la base de datos, pero luego se cierra el modal y no tengo ningún error, pero el modal se cierra sin ningún motivo.
Creo que el problema es cuando llamo a firebase para actualizarlo (en la función addTodo), pero no tengo idea de por qué.
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> ); } } );TodoTarea.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> )Ese error ocurre cuando finaliza una función asíncrona y el componente que activó esa función se desmontó, por lo que el resultado de la función asíncrona intenta actualizar el estado de algo que ya no está allí.
Por lo general, para evitar esto, debe rechazar la promesa O verificar si el componente aún está montado antes de intentar modificar su estado.
Podría realizar un seguimiento del estado montado haciendo algo como
componentDidMount = () => { this.mounted = true; } compunentWillUnmount = () => { this.mounted = false; } entonces puede verificar si this.mounted antes de intentar cambiar el estado.