ReactJS однократная инициализация

Question

У меня есть компонент, скажем, HomePage, куда я звоню getCurrentLocation, чтобы узнать местоположение с помощью GPS.Это значение будет использоваться для выбора значения из выпадающего списка.Затем пользователь может использовать раскрывающийся список для изменения значения.

Когда я ухожу с этой страницы и затем возвращаюсь, используя

const appHistory = createHashHistory();
appHistory.goBack();

, конструктор и componentDidMount выполняются снова.Таким образом, выбранное пользователем значение теряется, и я снова получаю значение по умолчанию.

Так куда же поместить код инициализации?Я родом из Ionic, где есть что-то вроде ionViewDidLoad , которое выполняется только при первой загрузке страницы.Есть ли эквивалент для этого React.

Ниже мой код

export class HomePage extends React.Component {

constructor(props){
super(props);
state = {
        currentLocationCoordinates:[],
    };
this.getCurrentLocation = this.getCurrentLocation.bind(this);
}

getCurrentLocation(){
        navigator.geolocation.getCurrentPosition((success)=>{
            console.log("Current Location: "+success.coords);
            this.setState({
                currentLocationCoordinates:[success.coords.latitude,success.coords.longitude],
                userLocationCoordinates:[success.coords.latitude,success.coords.longitude]
            });
        });
    }
}
componentDidMount(){
        this.getCurrentLocation();
}


}

Answer 1

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

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

Большинство изДля этого React Community использует Redux , хотя другие контейнеры состояний существуют .Я бы посоветовал взглянуть на Redux и использовать его для хранения этих данных о местоположении как части магазина Redux.Тогда они всегда будут доступны на вашем компоненте в качестве реквизита, независимо от того, будет он повторно отображаться или нет.

Answer 2

Вам необходимо использовать ComponentDidMount() вместе с флагом, который определяет, был ли компонент инициализирован или нет.Вы на правильном пути.

componentDidMount(){
        initialized ? "" : this.getCurrentLocation();
}