如何將單個數據從子組件傳遞到父組件？

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;