特定的状态不会更新 - React

问题描述

我使用的是 Google Cloud 平台提供的 Google Maps Javascript API。 地图组件有一个名为 styles 的属性。这个属性告诉地图应该渲染什么，比如餐馆、公园等等。

问题是当我调用 setState 方法并更新我想在地图中显示的内容时，与我状态中的其他元素不同，没有任何反应。

看一下代码的一个和平部分来理解我指的是什么： 当我不想在地图上显示默认poi特征时，这是我的方法

        this.setState({
            showPoiFeatures: false,mapTypestyle: [
                {
                    featureType: "poi",stylers: [{ visibility: "off" }]
                },]
        })
    }

这就是我上面所说的属性

<Map
    className="map"
    initialCenter={{ lat: -23.0916907,lng: -47.2216777 }}
    zoom={14}
    google={this.props.google}
    onClick={this.onClickMap}
    controlSize="1"
    clickableIcons={false}
    styles={this.state.mapTypestyle}
>

这是我的初始状态：

state = {
        variable1: {},variable2: {
            object: {
                variable3: '',variable4: 0,variable5: 0,variable6: 0,variable7: '',variable8: 0,variable9: '',variable10: 0,variable11: 0
            }
        },variable12: true,mapTypestyle: [],showPoiFeatures: true,}

空数组表示我想显示地图上的所有要素

如果这篇文章被混淆了，请让我解释更多。谢谢

解决方法

style 的 <Map/> 参数采用 CSS 样式对象 - 通常是宽度和高度。如果您想要 custom map style，则需要使用 setOptions>styles。 这是一个 sample code（注意：使用 API 密钥使代码正常工作y）以及下面关于如何实现这一点的代码片段：

import React,{ Component } from "react";
import { Map,Marker,GoogleApiWrapper } from "google-maps-react";

const mapStyle = [
  {
    featureType: "poi",stylers: [{ visibility: "off" }]
  }
];

export class MapContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mapVariable: true
    };
  }
  _mapLoaded(mapProps,map) {
   
    this.setState({
      mapVariable: map
    });
  }

  showStyle = () => {
    this.state.mapVariable.setOptions({
      styles: mapStyle
    });
  };

  hideStyle = () => {
    this.state.mapVariable.setOptions({
      styles: null
    });
  };

  render() {
    const coords = { lat: 40.712775,lng: -74.005973 };
    const containerStyle = {
      position: "relative",width: "600px",height: "600px"
    };

    return (
      <div>
        <form>
          <input
            type="radio"
            id="show"
            name="choice"
            value="show"
            onClick={this.showStyle}
          />
          <label for="show">Show</label>
          <input
            type="radio"
            id="hide"
            name="choice"
            value="hide"
            onClick={this.hideStyle}
          />
          <label for="hide">Hide</label>
          <br />
        </form>
        <Map
          containerStyle={containerStyle}
          google={this.props.google}
          zoom={16}
          initialCenter={coords}
          onReady={(mapProps,map) => this._mapLoaded(mapProps,map)}
        >
          <Marker position={coords} />
        </Map>
      </div>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: "YOUR_KEY"
})(MapContainer);