Question

我正在用可点击的标记和信息窗口构建一个Google地图。我收到此错误“ ReferenceError：状态未定义”，并且我不知道是什么原因引起的。

这是我的componet函数：

export class Container extends React.Component {
  render() {
    if (!this.props.loaded) {
      return <div>Loading...</div>;
    }

    const style = {
      width: "100vw",
      height: "90vh"
    };

    state = {
      showingInfoWindow: false,
      activeMarker: {},
      selectedPlace: {}
    };

    onMarkerClick = (props, marker, e) =>
      this.setState({
        selectedPlace: props,
        activeMarker: marker,
        showingInfoWindow: true
      });

    onMapClicked = props => {
      if (this.state.showingInfoWindow) {
        this.setState({
          showingInfoWindow: false,
          activeMarker: null
        });
      }
    };

    return (
      <div style={style}>
        <Map
          item
          xs={12}
          google={this.props.google}
          onClick={this.onMapClick}
          zoom={13}
          initialCenter={{ lat: 39.3643, lng: -74.4229 }}
        >
          <Marker
            onClick={this.onMarkerClick}
            title={"The marker`s title will appear as a tooltip."}
            name={"Salvation Army"}
            position={{ lat: 39.3549, lng: -74.4429 }}
          />

          <InfoWindow
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
          >
            <div>
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
          </InfoWindow>
        </Map>
      </div>
    );
  }
}

一切似乎都正确，但是我仍然收到错误消息。任何帮助将不胜感激！

Answer 1

您正在渲染方法中使用state变量，而无需先声明它。

const state = {
  showingInfoWindow: false,
  activeMarker: {},
  selectedPlace: {}
};

您很可能打算将其设置为class属性。

const style = {
  width: "100vw",
  height: "90vh"
};

export class Container extends React.Component {
  state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {}
  };

  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });

  onMapClicked = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };

  render() {
    if (!this.props.loaded) {
      return <div>Loading...</div>;
    }

    return (
      <div style={style}>
        <Map
          item
          xs={12}
          google={this.props.google}
          onClick={this.onMapClick}
          zoom={13}
          initialCenter={{ lat: 39.3643, lng: -74.4229 }}
        >
          <Marker
            onClick={this.onMarkerClick}
            title={"The marker`s title will appear as a tooltip."}
            name={"Salvation Army"}
            position={{ lat: 39.3549, lng: -74.4429 }}
          />

          <InfoWindow
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
          >
            <div>
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
          </InfoWindow>
        </Map>
      </div>
    );
  }
}

反应谷歌地图ReferenceError：状态未定义

1 个答案: