Реагировать на обмен данными между компонентами без перезагрузки компонента - PullRequest
1 голос
/ 03 августа 2020

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

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

Я думал, что способ сделать это - использовать компонент контекста и передать функции как значения в провайдер -parent отношения)

return (
<div id="App">
        <ImageProvider>
             ...
             <SidePanel />
              <WebMapView />
             ...
          </ImageProvider>
    </div>
  );
}

Я импортирую в свой mapcomponent контекст и Usecontext, как показано ниже

import { ImageContext } from "./ImageContext";
const [images, setImages] = useContext(ImageContext);

, а затем устанавливаю контекст, как показано ниже, когда пользователь вводит данные в map

export const WebMapView = () => {
...
    setImages(results.features);
...
}

Описание проблем:

  1. Мне нужно получить данные выбора на карте и передать их в sidecomponent каждый раз, когда пользователь вводит данные без перезагрузки map, но сохраняя нормальную функциональность реагирования на перезагрузку sidepanel, когда новые данные доступны в состоянии
  2. Мне нужно передать информацию ИЗ sidepanel в mapcomponent для обработки на карте, но с участием не перезагружая карту.

Я начинаю понимать, что контекст - не подходящий инструмент для этого, следует ли мне использовать что-то еще? Я изучил shouldComponentUpdate и purecomponents, но в документации указано, что они являются скорее «предложениями» и не гарантируют предотвращения перезагрузки ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...