如何在 javascript 中的 windows.popState 上读取不同的 history.pushStates？

问题描述

我的代码中有两个 pushState。我想分别读取这些状态并运行不同的功能。但是每当未提交表单时，不会触发与其关联的 pushState 并且显示此错误：Uncaught TypeError: Cannot read property 'name' of null at window.onpopstate (poke.js:18) 此代码位于事件“DOMContentLoaded”内。如何在 onpopstate 上读取不同的 pushStates？

//代码

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

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

解决方法

将 optional chaining 与 ?. 运算符一起使用。 这会检查 name 属性是否存在，如果名称不存在，则返回 undefined 而不是错误。

if (event.state?.name) {

或者，如果您需要旧版浏览器支持或出于其他原因，只需检查 state 属性是否为 null，因为这是您代码中的两个选项之一。

if (event.state !== null) {