Как я могу прочитать другую историю.pushStates в windows.popState в javascript?

#javascript #window #pushstate #popstate

Вопрос:

В моем коде есть два состояния. Я хочу читать эти состояния отдельно и запускать разные функции.Но всякий раз,когда форма не отправляется, pushState, связанный с ней, не запускается, и отображается эта ошибка: Uncaught TypeError: Cannot read property 'name' of null at window.onpopstate (poke.js:18) этот код находится внутри события «DOMContentLoaded». Как я могу прочитать разные состояния в onpopstate?

//код

 window.onpopstate = function(event){
        if(event.state.name){
            
            getInfo(event.state.get_info,cards,pgHeader,pokeInfo,pokeDiv);
        }else {
            
            showAll(cards,pgHeader,pgParagraph,pokeInfo,pokeDiv);
        };
    };

    all_poke.onclick = ()=>{
        history.pushState(null,null,"/all_pokemons")
        pokeInfo.innerHTML = '';
        showAll(cards,pgHeader,pgParagraph,pokeInfo,pokeDiv);
        return false;
    }
  
    form.onsubmit = function (){
        
        pgParagraph.innerHTML = '';
        var name = searchBox.value;
        history.pushState({name},null,`${name}/info`)
        getInfo(name,cards,pgHeader,pokeInfo,pokeDiv)
        return false;
    }

1. Какая это линия poke.js:18 ? А кто вы getInfo и showAll какие функции выполняете?

2. В событии all_poke.onclick оно выводит состояние ,не имеющее объекта в качестве первого параметра. Но в событии form.onsubmit передается состояние, в котором передается объект с именем «имя». Теперь, когда выполняется только событие onclick, функция getInfo() генерирует ошибку внутри условия if.

Ответ №1:

Используйте дополнительную цепочку с ?. оператором. Это проверяет name , существует ли свойство, и возвращает undefined вместо ошибки, если имя отсутствует.

 if (event.state?.name) {

В качестве альтернативы, если вам нужна поддержка старого браузера или по другим причинам, просто проверьте , есть ли это state свойство null , так как это один из двух вариантов в вашем коде.

 if (event.state !== null) {