Soy nuevo en React native y estoy tratando de pasar datos (que es la ubicación actual del usuario) del componente secundario a un componente principal.
Padre
const MapScreen = ({ navigation }) => { const [changeMapView, setChangeMapView] = useState('standard'); const [buttonColor, setButtonColor] = useState('#ffffff'); const [iconColor, setIconColor] = useState('purple'); let currentPosition; // varibale that I have declared console.log('current position in mapscreen.js', currentPosition) return ( <SafeAreaView style={{ flex: 1 }}> <MapLook> <Map mapType={changeMapView} currentPosition={currentPosition} /> </MapLook> <ButtonView> <SatelitViewPanel changeMapView={changeMapView} setChangeMapView={setChangeMapView} /> <LocationViewPanel currentPosition={currentPosition} /> </ButtonView> </SafeAreaView> ); }; export default MapScreen;Niño
const Map = (props, currentPosition) => { const [mapRegion, setMapRegion] = useState({ longitude: 12.5683, latitude: 55.6761 }); const getRegionForType = (type) => { const regionData = { longitude: mapRegion.longitude, latitude: mapRegion.latitude }; return regionData; } const getMapRegion = () => getRegionForType('map'); currentPosition = getMapRegion() // geting the current position console.log(currentPosition) // in the console it shows the current position const getMarkerCoords = () => getRegionForType('marker'); const setRegionForLocation = (location)=> { let coords = location.coords; let longitude = coords.longitude; let latitude = coords.latitude; if(mapRegion.longitude === longitude && mapRegion.latitude === latitude) return; setMapRegion({longitude, latitude, longitudeDelta, latitudeDelta}); } return ( <View style={{ flex: 1 }}> <MapView provider={PROVIDER_GOOGLE} style={styles.map} mapType={props.mapType} > {mapRegion != null && ( <Marker coordinate={getMarkerCoords()}> <Image source={require('../../assets/marker.png')} style={{ height: 90, width: 90 }} /> </Marker> )} </MapView> </View> ); }; export default Map; Cuando console.log(currentPostion) en el componente principal, genera undefined . Traté de hacerlo con estado de enlace, pero mostró que setState no es una función
¿Cómo puedo pasar los datos de niño a padre?
Usted decalre su estado de uso, por ejemplo:
const [currentPosition, setCurrentPosition] = useState();Y pase sus ganchos a los componentes secundarios:
<LocationViewPanel currentPosition={currentPosition} setCurrentPosition={setCurrentPosition} />Y finalmente, establezca la posición usando el gancho pasado:
setCurrentPosition(getMapRegion());Entonces, funcionará,
Espero que esto ayude a tu problema.
const Map = ({currentPosition, ...props}) => { /// need to change props in this type. const [mapRegion, setMapRegion] = useState({ longitude: 12.5683, latitude: 55.6761 }); const getRegionForType = (type) => { const regionData = { longitude: mapRegion.longitude, latitude: mapRegion.latitude }; return regionData; } const getMapRegion = () => getRegionForType('map'); currentPosition = getMapRegion() // geting the current position console.log(currentPosition) // in the console it shows the current position const getMarkerCoords = () => getRegionForType('marker'); const setRegionForLocation = (location)=> { let coords = location.coords; let longitude = coords.longitude; let latitude = coords.latitude; if(mapRegion.longitude === longitude && mapRegion.latitude === latitude) return; setMapRegion({longitude, latitude, longitudeDelta, latitudeDelta}); } return ( <View style={{ flex: 1 }}> <MapView provider={PROVIDER_GOOGLE} style={styles.map} mapType={props.mapType} > {mapRegion != null && ( <Marker coordinate={getMarkerCoords()}> <Image source={require('../../assets/marker.png')} style={{ height: 90, width: 90 }} /> </Marker> )} </MapView> </View> ); }; export default Map;