特定的状态不会更新 - React

Question

我正在使用 Google 云平台提供的 Google 地图 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,
    }

空数组表示我想在地图上显示所有地图项

如果对这段文字感到困惑，请让我解释更多。谢谢

Answer 1

<Map/> 的 style 参数采用 CSS 样式对象 - 通常是宽度和高度。如果你想要 custom map style，你需要使用 setOptions>styles。这是一个 sample code（N注意：使用 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);

特定的状态不会更新 - React

A specific piece of state does not update - React

reactjs

google-maps

setstate

google-maps-react