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

Question

我是 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 。 我试图用钩子状态来做，但它表明setState不是一个函数

如何将数据从孩子传递给父母？

Answer 1

你 decalre 你的 useState，例如：

const [currentPosition, setCurrentPosition] = useState();

并将其钩子传递给子组件：

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

最后，使用传递的钩子设置位置：

setCurrentPosition(getMapRegion());

所以，它会工作，

Answer 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;