Javascript 是什么原因导致无法在keyup上更新阵列

我正在使用普通（香草）JavaScript以HTML表的形式显示JSON。还有一个搜索（筛选）功能：

class countries列表{
构造函数（）{
this.apiURL=”https://gist.githubusercontent.com/Goles/3196253/raw/9ca4e7e62ea5ad935bb3580dc0a07d9df033b451/CountryCodes.json";
这个国家=[]；
this.searchBox=document.querySelector（“#searchBox”）；
this.stringToMatch=''；
this.tableRows=''；
}
//获取项目
异步getFilteredCountries（）{
const response=wait fetch（this.apirl）；
this.countries=wait response.json（）；
//如果有搜索字符串，则筛选结果
this.stringToMatch=this.searchBox.value；
如果（this.stringToMatch.length>0）{
this.countries=this.countries.filter（国家=>{
返回country.name.toLowerCase（）.includes（this.stringToMatch.toLowerCase（））| | country.code.includes（this.stringToMatch.toUpperCase（））；
});
}
}
//渲染行
渲染箭头（arr，容器）{
设el=document.querySelector（容器）；
el.innerHTML+=arr.map（函数（项）{
返回`
${item.name}
${item.code}
`
}).加入（“”）；
}
异步hideLoader（）{
让loader=document.querySelector（'.loader'）；
const action=this.countries.length>0？'add'：'remove'；
类列表[action]（'d-none'）；
}
异步初始化（）{
等待此消息。getFilteredCountries（）；
等待这个；
this.searchBox.addEventListener（“keyup”，this.getFilteredCountries（））；
this.renderRows（this.countries，#countries_table tbody'）；
}
}
const countriesList=新countriesList（）；
countriesList.init（）
.box{
位置：相对位置；
最小高度：90vh；
}
.加载器{
边框：4px实心#ccc；
边框顶色：透明；
边界半径：50%；
宽度：50px；
高度：50px；
位置：绝对位置；
顶部：110px；
左：50%；
左边距：-50px；
动画：旋转2s线性无限；
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}

国家
代码
您可能需要在键控上的getFilteredCountries之后调用renderRows函数。
您需要在值筛选结束后调用renderRows函数（您可以在getFilteredCountries函数内部调用它）

我已经更新了代码并放了一个截图。请检查它是否有用。
有一些原因导致您的
renderRows
方法未被调用。第一件事是，当添加一个方法作为事件侦听器时，您应该像这样编写函数名
this.getFilteredCountries
，而不是
this.getFilteredCountries（）
。我用不同的方法分离了API调用，因为它应该只执行一次，并且在过滤时我们可以过滤数组。主要的是，在使用类时，我们需要绑定方法或使用ES6语法，否则所有类属性都将是未定义的。剩下的部分很简单。我编写了一个单独的方法
updateRows（）
，它将首先清除innerHTML并显示结果。希望这能解决你的问题


class countries列表{
构造函数（）{
这是apiURL=
"https://gist.githubusercontent.com/Goles/3196253/raw/9ca4e7e62ea5ad935bb3580dc0a07d9df033b451/CountryCodes.json";
这个国家=[]；
this.searchBox=document.querySelector（#searchBox”）；
此.stringToMatch=“”；
此参数为“=”；
}
//获取项目
getFilteredCountries=async（）=>{
const response=wait fetch（this.apirl）；
this.countries=wait response.json（）；
//如果有搜索字符串，则筛选结果
this.stringToMatch=this.searchBox.value；
如果（this.stringToMatch.length>0）{
this.countries=this.countries.filter（（国家）=>{
返回(
country.name
.toLowerCase（）
.includes（此.stringToMatch.toLowerCase（））||
country.code.includes（this.stringToMatch.toUpperCase（））
);
});
this.renderRows（this.countries，“#countries_table tbody”）；
}
};
//渲染行
renderRows=（arr，容器）=>{
设el=document.querySelector（容器）；
el.innerHTML=“”；
el.innerHTML+=arr
.map（功能（项目）{
返回`
${item.name}
${item.code}
`;
})
.加入（“”）；
};
hideLoader=async（）=>{
let loader=document.querySelector（“.loader”）；
const action=this.countries.length>0？“添加”：“删除”；
类列表[操作]（“d-none”）；
};
init=async（）=>{
等待此消息。getFilteredCountries（）；
等待这个；
this.searchBox.addEventListener（“keyup”，this.getFilteredCountries）；
this.renderRows（this.countries，“#countries_table tbody”）；
};
}
const countriesList=新countriesList（）；
countriesList.init（）
.box{
位置：相对位置；
最小高度：90vh；
}
.加载器{
边框：4px实心#ccc；
边框顶色：透明；
边界半径：50%；
宽度：50px；
高度：50px；
位置：绝对位置；
顶部：110px；
左：50%；
左边距：-50px；
动画：旋转2s线性无限；
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

国家
代码
您将如何做到这一点？在
init（）
方法中？或者在
getFilteredCountries
？请单击“复制要回答的代码段”按钮并编辑复制的代码。谢谢如果我清空搜索框，列表将保持为空。我编辑了js代码。请现在查看。它可以工作，但是
updateRows
似乎与
renderRows
相同。