Question

我正在尝试制作一个简单的地图应用程序，该应用程序不包含任何可在点击时触发信息框的标记，我正在使用react-google-maps库，现在我正在尝试处理点击部分的信息框，我为每个标记添加了一个isOpen属性，默认情况下该值应为false，当该值为true时，应显示infoBox。这是状态：

state = {
   markers: [
     {
       "id": "Abu-Simbel",
       "position":{ lat: 22.337232, lng: 31.625799 },
       "isOpen":false
     },
     {
       "id": "Karnak-Temples",
       "position":{ lat: 25.718835, lng: 32.65727 },
       "isOpen":false
     },
     {
       "id": "Luxor-Temple",
       "position":{ lat: 25.699502, lng: 32.639051 },
       "isOpen":false
     },
     {
       "id": "Edfu-Temple",
       "position":{ lat: 24.977929, lng: 32.87337 },
       "isOpen":false
     },
     {
       "id": " Phiale-Temple",
       "position":{ lat: 24.025171, lng: 32.884643 },
       "isOpen":false
     },
     {
       "id": " Kom-Ombo-Temple",
       "position":{ lat: 24.452133, lng: 32.928432  },
       "isOpen":false
     }
   ]
 }

这是handleClick函数：

  handleMarkerTap=(marker)=>{

    if (marker.isOpen === false) {
      marker.isOpen = true
    } else if (marker.isOpen === true) {
      marker.isOpen = false
    }
  }

这就是我在地图组件内部渲染标记的方式：

props.markers.map(
        (marker)=>(
          <div key={marker.id}>
            <Marker
            title={marker.id}
            id={marker.id}
            position={marker.position}
            isOpen={marker.isOpen}
            onClick={
                () => {
                  props.handleMarkerTap(marker)
                  console.log(marker.id+" is "+marker.isOpen);

                }
            }
            >
            {marker.isOpen && <InfoBox
              onCloseClick={props.handleMarkerTap}
              options={{ closeBoxURL: ``, enableEventPropagation: true }}
              >
                <div style={{ backgroundColor: `yellow`, opacity: 0.75, padding: `12px` }}>
                  <div style={{ fontSize: `16px`, fontColor: `#08233B` }}>
                  {marker.id}
                  </div>
                </div>
              </InfoBox>}
            </Marker>
          </div>
        )
      )

问题是如何通过此函数访问每个标记上的isOpen属性。

Answer 1

当您要更改（修改）组件中的任何状态时（即执行类似marker.isOpen = true的操作），您应该在组件herachy中调用setState来触发重新渲染。重新渲染会使UI根据您对状态所做的更改来重新绘制。

此刻，您正在对isOpen字段进行突变，但看上去与此并不相关。

也许您可以对组件代码进行以下更改？这只是您可以采用的一种方法，但是它可能是实现重新渲染的最简单方法，而没有太多细节：

setState

我如何访问在react状态下设置的对象数组中的属性？

1 个答案: