特定的状态不会更新 - React答案

【问题标题】：A specific piece of state does not update - React特定的状态不会更新 - React
【发布时间】：2021-03-05 15:46:25
【问题描述】：

我正在使用 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,
    }

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

如果本文有混淆，请让我解释更多。谢谢

【问题讨论】：

对不起，正确的标题是：一个特定的状态没有更新
您好，有点令人困惑，您是在状态中定义样式吗？另外，您能否在this.setState 行之前发布一些代码。（如果是机密内容，您可能需要更改变量名称，
我认为，在第二个代码块的styles 中，它应该是{{ <code> }} 双括号。请您试一次并确认好吗？
能否请您发布指向 API 文档的链接。另外，您确定是styles 而不是styles？它也应该接受一个数组或一个对象，因为您当前正在传递一个数组。
@kishore，我尝试放双括号，但不起作用

标签： reactjs google-maps setstate google-maps-react

【解决方案1】：

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

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);

【讨论】：