Не обновляется компонент ObjectManager при изменении state

100
30 сентября 2019, 06:20

Когда жму на кнопку обновляется состояние компонента. И обновленное состояние передается в компонент ObjectManager, но этот компонент не перерисовывается.

Используется библиотека react-yandex-maps

`
import { YMaps, Map, ObjectManager} from 'react-yandex-maps';  import React, {Component} from 'react';  export class App extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            zoom: 15,
            center: [54.363403, 48.572223],
            controls: ['zoomControl'],
            features: null
        };
    }
    handleClick() {
        this.setState({
            features: [{
                id: "4",
                type: "Feature",
                geometry: {
                    type: "Point",
                    coordinates: [54.39, 48.52]
                }
            },
                {
                    id: "6",
                    type: "Feature",
                    geometry: {
                        type: "Point",
                        coordinates: [54.37, 48.5462]
                    }
                }
            ]
        })
    }
    render() {
        const {center, features} = this.state;
        return (
                <div>
                    <YMaps>
                        <div className="container_ymaps">
                            <Map
                                state={this.state}
                                modules={['control.ZoomControl']}
                                instanceRef={map => this.map = map}
                                /*onBoundsChange={this.onBoundsChange}*/
                                width={1000}
                                height={700}
                            >                    
                                <ObjectManager
                                    options={{
                                        clusterize: true,
                                        gridSize: 32,
                                    }}
                                    objects={{
                                        openBalloonOnClick: true,
                                        preset: 'islands#greenDotIcon',
                                    }}
                                    clusters={{
                                        preset: 'islands#redClusterIcons',
                                    }}
                                    /*filter={object => object.id % 2 === 0}*/
                                    defaultFeatures={**features**}
                                    modules={[
                                        'objectManager.addon.objectsBalloon',
                                        'objectManager.addon.objectsHint',
                                    ]}
                                />
                            </Map>
                        </div>
                    </YMaps>
                    <button onClick={this.handleClick}> Add </button>
                </div>
        )
    } };`
Answer 1

Я не работал с данным пакетом, но посмотрел исходный код для ObjectManager и похоже что внутри нет никакого функционала для перерендера:

export class ObjectManager extends React.Component {
  constructor() {
    super();
    this.state = { instance: null };
  }
  componentDidMount() {
    const instance = ObjectManager.mountObject(
      this.props.ymaps.ObjectManager,
      this.props
    );
    this.setState({ instance });
  }
  componentDidUpdate(prevProps) {
    if (this.state.instance !== null) {
      ObjectManager.updateObject(this.state.instance, prevProps, this.props);
    }
  }
  componentWillUnmount() {
    ObjectManager.unmountObject(this.state.instance, this.props);
  }
  render() {
    return null;
  }
  // ...
}

Судя по всему данный компонент не подразумевает динамическое обновление, и вместо этого предполагает перерендер родительского компонента.

READ ALSO
объясните что такое this в js [дубликат]

объясните что такое this в js [дубликат]

На данный вопрос уже ответили:

106
Как запустить app на localhost с загрузкой js [закрыт]

Как запустить app на localhost с загрузкой js [закрыт]

Запускаю проект командой node appjs , переходу на localhost и вижу следующее:

121
Почему не работает getDisplayMedia в chrome?

Почему не работает getDisplayMedia в chrome?

Хочу вывести экран в тег videoИспользую API:

90
Crypto Pro Browser Plugin: получить имя провайдера

Crypto Pro Browser Plugin: получить имя провайдера

Через плагин Crypto Pro (проверка работы плагина Crypto Pro) получаю список всех имеющихся сертификатов на компьютере (вместе отображаются и те, что...

127