Как я могу получить доступ к свойству в массиве объектов, которое установлено в состоянии в реакции?

Я пытаюсь создать простое приложение с картой, в котором нет маркеров, которые запускают информационное окно при щелчке, я использую библиотеку response-google-maps, прямо сейчас я пытаюсь обработать информационное окно на части щелчка, я добавил свойство isOpen для каждого маркера, значение которого по умолчанию должно быть ложным, а если оно истинно, должно появиться информационное окно. это состояние:

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 для каждого маркера с помощью этой функции.


reactjs javascript google-maps-api-3 google-maps-markers react-google-maps
person Lina Basuni    schedule 12.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы мутируете (модифицируете) любое состояние в вашем компоненте (т. Е. Делаете что-то вроде marker.isOpen = true), вы должны вызывать setState в иерархии компонентов, чтобы запустить повторную визуализацию. Повторный рендеринг вызывает перерисовку пользовательского интерфейса в зависимости от изменений, которые вы внесли в свое состояние.

В настоящий момент вы изменяете свое поле 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] }) 
    }
  }>
person Dacre Denny    schedule 12.08.2018