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

Question

I am trying to make a simple map app that has a no of markers that triggers an info box on click , I'm using react-google-maps library , right now I am trying to handle the info box on click part ,I added an isOpen property to each marker which value should be false by default and when it is true the infoBox should appear . this is the state:

 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 } ] } 

and this is the handleClick function:

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

and this is the how I rendered the markers inside the map component :

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

The question is how to access the isOpen property on each marker through this function .

Answer 1

When you're mutating (modifying) any state in your component (ie doing something like marker.isOpen = true ), you should be calling setState in your component herachy to trigger a re-render. The re-render causes the UI to redraw based on the changes you made to your state.

At the moment you're mutating your isOpen field, but it doesn't look like you're calling setState in relation to that.

Perhaps you could make the following changes to your component code? This is just one approach you could take, but it is perhaps the simplest way to achieve the re-render, without too much detail:

<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] }) 
    }
  }>