Tengo un problema simple: tengo un componente principal que navega a un componente secundario, se supone que el componente secundario actualiza el estado en el componente principal cuando el componente secundario navega hacia atrás ( this.props.navigation.navigate("parentComponent", { params }) ). Según los documentos, esto debería ser fácil: https://reactnavigation.org/docs/params/
La acción de navegación se trata como una acción de goBack si la pantalla ya existe. Sin embargo, cuando hago esto e intento console.log los accesorios en la pantalla principal después de volver, se muestra vacío.
Padre.js
<View style={styles.availabilitycontainer} visible={true}> <View style={styles.titlegroupcontainer}> <Text style={styles.abouttitle}>Schedule Availability</Text> {/*Redirect to edit schedule*/} <TouchableOpacity style={styles.cameracantainer} onPress={() => this.props.navigation.navigate("ChildComponent") } > <Image source={Editoutline} /> </TouchableOpacity> </View> <ProfileAvalability /> </View>Niño.js
async submitToBackend(){ /* Code to submit to backend omitted */ this.props.navigation.navigate('ParentComponent', { params }); }Navegar realmente no funciona de esa manera. Si detecta que ParentComponent ya está allí en la pila, simplemente lo traerá adelante y no necesariamente lo volverá a procesar/recargar.
Lo que sugiero es pasar un segundo parámetro como una función que realizará los cambios, por ejemplo:
submitData(data) { setState(data) }entonces cuando llamas al niño:
props.navigation.navigate("ChildComponent", { submitData })luego, dentro de ChildComponent, cuando haya terminado de procesar, llame a submitData ([inserte sus datos aquí]), luego esa función realizará la escritura en ParentComponent. Esto supone que está utilizando useState().