如何访问在反应状态中设置的对象数组中的属性？答案

【问题标题】：How can I access a property in an array of objects that is set in the state in react?如何访问在反应状态中设置的对象数组中的属性？
【发布时间】：2019-01-19 14:34:09
【问题描述】：

我正在尝试制作一个简单的地图应用程序，它没有在点击时触发信息框的标记，我正在使用 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属性。

【问题讨论】：

标签： javascript reactjs google-maps-api-3 google-maps-markers react-google-maps

【解决方案1】：

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

目前您正在更改您的 isOpen 字段，但看起来您并没有为此调用 setState。

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

<Marker
  title={marker.id}
  id={marker.id}
  position={marker.position}
  isOpen={marker.isOpen}
  onClick={
    () => {
      props.handleMarkerTap(marker)
      console.log(marker.id+" is "+marker.isOpen);

      // Call the setState method to cause a re-render. Pass a
      // copy (achieved via [... ] syntax) of the markers array 
      // to setState to ensure that react sees the markers array 
      // as a new array rather than a reference to the same array
      // (this also encourages react to re-render)
      this.setState({ markers : [...this.state.markers] }) 
    }
  }>

【讨论】：