无法读取未定义和未定义的属性“纬度”

Question

I'm now trying to feed the position of the user through the variable (coords) but every time I pass any variable into onClickUserLoc() the variable has the error

Cannot read property 'lat' of undefined

and when I console.log it states undefined? The coords variable holds an array of location data such as lng and lat but become undefined in onClickUserLoc().

Code:

    export default class App extends React.Component {
          constructor() {
            super();
            this.state = {
               ready: false,
               where: { lat: '', lng: '' },
               error: null,
               };
           this.onClickUserLoc = this.onClickUserLoc.bind(this)
          }
          
    componentDidMount() {
    let geoOptions = {
      enableHighAccuracy: true,
      timeOut: 20000,
      maximumAge: 60 * 60 * 24,
    };
    this.setState({ ready: false, error: null });
    navigator.geolocation.getCurrentPosition(
      this.geoSuccess,
      this.geoFailure,
      geoOptions
    );
  }

  mapRef = React.createRef();

  

  geoSuccess = (position) => {
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);
    console.log(this.state.where?.lng);
    console.log(this.state.where?.lat);
    

    this.setState({
      ready: true,
      where: { lat: position.coords.latitude, lng: position.coords.longitude 
      },
      
    });
    console.log(this.state.where?.lng);
    console.log(this.state.where?.lat);
  };
  geoFailure = (err) => {
    this.setState({ error: err.message });
    console.log(this.state.error);
  };

  

          onClickUserLoc({ coords }) {
            this.mapRef.current.leafletElement.flyTo(coords, 15);
            console.log(coords);
          }

         
render() {

const coords = [this.state.where?.lat, this.state.where?.lng];
        return (
            <>
            <Button onPress={this.onClickUserLoc}>
            <Map 
             center={[...]} 
             zoom={0}> 
             style={{ height: "90vh" }}
             ref={this.mapRef}
             
              <TileLayer
                  attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
             </map>
            </>
      )
    }

Answer 1

If I understand correctly you want to fly to the position you are right now (geolocation). Variable coords variable is defined inside render method. You either pass the coords variable as an argument to button's onPress:

 <Button onPress={() => this.onClickUserLoc(coords)}></Button>

but you don't need to destructure it here

onClickUserLoc(coords) { // here no need to destructure it.
   this.mapRef.current.leafletElement.flyTo(coords, 15);
}

or use the state variable where directly inside onClickUserLoc without passing any argument:

 onClickUserLoc() {
    const {
      where: { lat, lng }
    } = this.state;
    this.mapRef.current.leafletElement.flyTo([lat, lng], 15);
  }

Demo