onRadiusChanged 时无法设置状态答案

【问题标题】：Can't set state when onRadiusChangedonRadiusChanged 时无法设置状态
【发布时间】：2019-04-14 08:20:49
【问题描述】：

我无法在此代码中设置状态。我理解它是因为我没有绑定函数getvalue。否则我不能调用 this.radius。我这个代码this.radius是5000。如果我把它改成

 getvalues = (e)=> { console.log(e)}

它返回未定义。

那我该怎么办

class Mapspage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      location: { lat: 52.2387683, lng: 5.8322737 },
      position: [],
      radius: 5000,
    };
  }

  getvalues(e) {
    this.setState({'radius': this.radius});
  }

  render() {
    const MapWithAMarker = withGoogleMap(props => (
      <GoogleMap
        defaultZoom={11}
        defaultCenter={this.state.location}
      >
        <Circle
          radius={this.state.radius}
          editable={true}
          onRadiusChanged={this.getvalues}
          onDragEnd={this.getvalues}
          draggable={true}
          visible={true}
          center={this.state.location}
        />
      </GoogleMap>
    ));

    return (
      <div className="box box-default">
          <MapWithAMarker
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
          />
        </div>
    );
  }
}

【问题讨论】：

标签： node.js reactjs google-maps react-google-maps

【解决方案1】：

我找到了答案。您需要引用圆形组件，然后您可以调用 getValues 函数。你还需要返回 false 的 shouldComponentUpdate

这是代码

class Mapspage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      location: { lat: 52.2387683, lng: 5.8322737 },
      position: [],
      radius: 5000
    };
  }
  mapMounted = ref => {
    this.map = ref;
  };

  shouldComponentUpdate(nextProps, nextState) {
    return false;
  }

  getvalues = e => {
    const radius = this.map.getRadius();
    const center = this.map.getCenter();
    this.setState({ radius: radius });
    this.setState({
      "location.lat": center.lat(),
      "location.lng": center.lng()
    });
  };

  render() {
    const MapWithAMarker = withGoogleMap(props => (
      <GoogleMap defaultZoom={11} defaultCenter={this.state.location}>
        <Circle
          ref={this.mapMounted.bind(this)}
          radius={this.state.radius}
          editable={true}
          onRadiusChanged={props.getval}
          onDragEnd={props.getval}
          draggable={true}
          visible={true}
          center={this.state.location}
        />
      </GoogleMap>
    ));

    return (
      <div className="box box-default">
          <MapWithAMarker
            getval={this.getvalues.bind(this)}
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
          />
        </div>
    );
  }
}

【讨论】：

【解决方案2】：

请试试这个，问题似乎与绑定有关。

class Mapspage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      location: { lat: 52.2387683, lng: 5.8322737 },
      position: [],
      radius: 5000,
    };
  }

  getvalues = (e) => {
    this.setState({radius: this.radius});
  }

  render() {
    const MapWithAMarker = withGoogleMap(props => (
      <GoogleMap
        defaultZoom={11}
        defaultCenter={this.state.location}
      >
        <Circle
          radius={this.state.radius}
          editable={true}
          onRadiusChanged={this.getvalues}
          onDragEnd={this.getvalues}
          draggable={true}
          visible={true}
          center={this.state.location}
        />
      </GoogleMap>
    ));

    return (
      <div className="box box-default">
          <MapWithAMarker
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
          />
        </div>
    );
  }
}

【讨论】：