Question

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

2021-02-05

479

javascript reactjs leaflet react-leaflet

我现在尝试通过变量 (coords) 提供用户的位置，但每次我将任何变量传递到 onClickUserLoc() 时，变量都会出现错误

Cannot read property 'lat' of undefined

当我使用 console.log 时，它显示未定义？coords 变量包含一个位置数据数组，例如 lng 和 lat，但在 onClickUserLoc() 中变为未定义。

代码：

    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

如果我理解正确的话，您想要飞往您当前所在的位置（地理位置）。变量 coords 在 render 方法中定义。您可以将 coords 变量作为参数传递给按钮的 onPress：

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

但您不需要在这里对其进行解构

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

或者直接在 onClickUserLoc 内使用状态变量 where ，而不传递任何参数：

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

Demo