volga-volga / react-native-yamap

React Native Yandex Maps | Яндекс Карты | Yandex.MapKit implementation for react native | YandexMaps
151 stars 84 forks source link

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

Open nursakn opened 2 years ago

nursakn commented 2 years ago

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

nursakn commented 2 years ago

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

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

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

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

ownikss commented 2 years ago

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

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

ownikss commented 2 years ago

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

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

nursakn commented 2 years ago

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

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