JS实时搜索过滤器未捕获承诺错误

Question

我正在使用javaScript和JSON进行实时搜索栏，并收到此错误，但我无法弄清楚：

Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at outputHtml (main.js:35)
at searchStates (main.js:19)

我不知道为什么。有什么帮助吗？法典：

const matchList = document.getElementById("matchList");
//search and filter data
const searchStates = async (searchText) => {
const res = await fetch("../data/states.json");
const states = await res.json();
//find input matches
let matches = states.filter((state) => {
const regex = new RegExp(`^${searchText}`, "gi");
return state.name.match(regex) || state.abbr.match(regex);
});
if (searchText.length === 0) {
matches = [];
}
outputHtml(matches);
};
//show filtered results
const outputHtml = matches => {
if (matches.length > 0) {
const html = matches
.map(
match => `
<div class="card card-body mb-1">
<h4>${match.name} (${match.abbr}) <span class="text-primary">${match.capital}</span></h4>
<small>Lat: ${match.lat} / Long: ${match.long}</small>
</div>
`
)
.join("");
matchList.innerHTML = html;
}
};
search.addEventListener("input", () => searchStates(search.value));

第19 行是outputHtml(matches);，第 35 行是matchList.innerHTML = html;

Answer 1

matchList未定义，请添加条件进行检查

if (matchList && matches.length > 0)

或

matchList.innerHTML = html;

替换为

document.getElementById("matchList").innerHTML = html;