Маркеры рендерятся некорректно при изменении массива

[nursakn]

trafficstars

Фильтрую массив и прогоняю по ним map, при изменении фильтров маркеры рендерятся неправильно, передаю уникальный key, фильтры получаю из пропсов. Нет сомнений что маркеры передаются реактивно, потому что React DevTools из flipper показывают правильный массив при передаче, но они не отрисовываются на карте. Первый рендер проходит правильно, пытался добавить this.mapRef.current.forceUpdate() и this.forceUpdate() => при изменении фильтров не помогло.

[nursakn]

Удалось решить проблему таким методом:

componentDidUpdate() {
  if (prevProps.filters !== this.props.filters) {
      this.setState({
        // ... что вам нужно
        loaded: false,
      });
      setTimeout(() => {
        this.setState({
          ...this.state,
          loaded: true,
        });
        setTimeout(() => {
          // метод с установкой положения камеры
          this.fitAllMarkers();
        });
      });
    }
}

Очень сомневаюсь в стабильности данного решения, но это единственное что я мог придумать.

UPD: Как поместить код с табуляцией?

[ownikss]

Чтобы добавить код в гитхабе можно использовать блок код в markdown. Начать с новой строки и выделить код через ```

Отредактировал сообщение выше, можешь посмотреть там

[ownikss]

В какой версии карт проблема?

По коду выше - можно код рендера прислать? Чтобы понять почему именно эти изменения помогли и в каком сценарии есть баг в библиотеке

[nursakn]

Здесь примерно то, что имею

return this.state.loaded ? (
  <YaMap
    ref={this.mapRef}
    style={[this.props.isList ? { display: 'none' } : {}, styles.map]}
    mapType="raster"
    tiltGesturesEnabled={false}
    rotateGesturesEnabled={false}
    showUserPosition={false}
    onCameraPositionChange={e => this.cameraPositionChange(e)}
    onTouchStart={e => {
      e.stopPropagation();
    }}>
{
          <>
            {this.state.moscowHotels.map(hotel =>
              hotel.priceFrom === 2300 ? (
                <Marker
                  source={require('../../../assets/images/2300.png')}
                  scale={0.4}
                  anchor={{ x: 0.5, y: 1 }}
                  key={hotel.hotelId.toString()}
                  point={{ lat: hotel.location.lat, lon: hotel.location.lon }}
                  onPress={() => {
                    this.onMapPress(() => {
                      this.props.setCurrentHotel(hotel.hotelId);
                    });
                  }}
                />
              ) : hotel.priceFrom === 2500 ? (
                <Marker
                  source={require('../../../assets/images/2500.png')}
                  scale={0.4}
                  anchor={{ x: 0.5, y: 1 }}
                  key={hotel.hotelId.toString()}
                  point={{ lat: hotel.location.lat, lon: hotel.location.lon }}
                  onPress={() => {
                    this.onMapPress(() => {
                      this.props.setCurrentHotel(hotel.hotelId);
                    });
                  }}
                />
              ) : hotel.priceFrom === 2800 ? (
                <Marker
                  source={require('../../../assets/images/2800.png')}
                  scale={0.4}
                  anchor={{ x: 0.5, y: 1 }}
                  key={hotel.hotelId.toString()}
                  point={{ lat: hotel.location.lat, lon: hotel.location.lon }}
                  onPress={() => {
                    this.onMapPress(() => {
                      this.props.setCurrentHotel(hotel.hotelId);
                    });
                  }}
                />
              ) : hotel.priceFrom === 3500 ? (
                <Marker
                  source={require('../../../assets/images/3500.png')}
                  scale={0.4}
                  key={hotel.hotelId.toString()}
                  anchor={{ x: 0.5, y: 1 }}
                  point={{ lat: hotel.location.lat, lon: hotel.location.lon }}
                  onPress={() => {
                    this.onMapPress(() => {
                      this.props.setCurrentHotel(hotel.hotelId);
                    });
                  }}
                />
              ) : null,
            )}
  </YaMap>) : null