Мне нужно вызвать handleClick(e) перед render(), чтобы значение диапазона было готово для маркера. Это в значительной степени первое реагирующее приложение, и это единственная оставшаяся небольшая проблема. Первый раз, когда я нажимаю, значение диапазона пусто, тогда это предыдущее значение вместо последнего.
import React, { Component } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import {LocationIcon} from './LocationIcon';
import Distance from './Distance'
var range, dist;
const MyMarker = props => {
const initMarker = ref => {
if (ref) {
ref.leafletElement.openPopup()
}
}
return <Marker ref = {initMarker} {...props}/>
}
class User2View extends Component {
constructor(props) {
super(props);
this.state = {
currentPos: null,
range: 'k'};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
this.setState({ currentPos: e.latlng });
localStorage.setItem('Poslat2', this.state.currentPos.lat);
localStorage.setItem('Poslon2', this.state.currentPos.lng);
const lat1 = localStorage.getItem('Poslat1');
const lon1 = localStorage.getItem('Poslon1');
const lat2 = localStorage.getItem('Poslat2');
const lon2 = localStorage.getItem('Poslon2');
dist = Distance(lat1, lon1, lat2, lon2);
if (dist <= 1) {
range = "User is in range"
}
else {
range = "User is not in range"
}
}
render() {
return (
<div>
<Map center = {this.props.center} zoom = {this.props.zoom} onClick = {this.handleClick}>
<TileLayer
url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
{ this.state.currentPos && <MyMarker icon = {LocationIcon} position = {this.state.currentPos}>
<Popup position = {this.state.currentPos}>
<pre>{range}</pre>
</Popup>
</MyMarker>}
</Map>
</div>
);
}
}
export default User2View;
Я пробовал getDerivedStateFromProps и componentDidMount, но ничего не работало. Спасибо
Ага :) Вы можете прочитать это на минимальном воспроизводимом примере . Кроме того, вы можете прочитать тур и Как спросить
Конечно. Я буду иметь это в виду в следующий раз.
Если ваш диапазон должен быть установлен на определенное значение до монтирования компонента, это должно быть указано в constructor
. Если его можно установить при монтировании компонента, вы можете поместить его в componentDidMount
.
Вот некоторая документация по методам жизненного цикла:
https://reactjs.org/docs/react-component.html#constructor
https://reactjs.org/docs/react-component.html#componentdidmount
Хорошо, это помогло. Инициализировал локальное состояние диапазона в конструкторе, а затем установил его состояние позже, когда я получил значение. Спасибо
По возможности в будущем постарайтесь сократить примеры кода до проблемных и важных частей кода, сохраняя при этом воспроизводимость примера.