代码之家 › 专栏 › 技术社区 › Tedi

如何将单个数据从子组件传递到父组件?

react-native javascript

Tedi · 技术社区 · 2 年前

我是React native的新手,我正在尝试将数据(即用户当前位置)从子组件传递到父组件。

父母亲

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;

小孩

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;

当我 console.log(currentPostion) 在父组件中,它输出 undefined . 我试着用hook state来做,但结果表明 setState 不是函数

如何将数据从子级传递到父级?

3 回复 | 直到 2 年前

Azamat 2 年前

您标记您的使用状态,例如:

const [currentPosition, setCurrentPosition] = useState();

并将其挂钩传递给子组件:

 <LocationViewPanel 
    currentPosition={currentPosition} setCurrentPosition={setCurrentPosition}
    />

最后,使用通过的挂钩设置位置:

setCurrentPosition(getMapRegion());

所以,它会起作用,

BlueLotus 2 年前

希望这能帮助你解决问题。

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;