У меня есть компонент карты, где пользователь будет выбирать изображения и другой компонент сбоку, чтобы использовать данные из выбора. но когда я устанавливаю контекст для компонента карты, он перезагружается, и карта сбрасывается. - как мне заблокировать перезагрузку этого компонента или использовать метод для обмена этими данными без запуска перезагрузки?
пример используйте кнопки масштабирования / колесо мыши, чтобы увидеть проблему сброса.
Я думал, что способ сделать это - использовать компонент контекста и передать функции как значения в провайдер -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);
...
}
Описание проблем:
- Мне нужно получить данные выбора на карте и передать их в
sidecomponent
каждый раз, когда пользователь вводит данные без перезагрузки map, но сохраняя нормальную функциональность реагирования на перезагрузку sidepanel
, когда новые данные доступны в состоянии - Мне нужно передать информацию ИЗ
sidepanel
в mapcomponent
для обработки на карте, но с участием не перезагружая карту.
Я начинаю понимать, что контекст - не подходящий инструмент для этого, следует ли мне использовать что-то еще? Я изучил shouldComponentUpdate и purecomponents
, но в документации указано, что они являются скорее «предложениями» и не гарантируют предотвращения перезагрузки ...