Javascript：未捕获的类型错误：无法读取 null 的属性'indexOf'

Question

我正在用数据填充一个表 - 使用fixed-data-table，这是一个 React.js 组件。但是，这在现阶段并不那么重要。

该表有一个搜索框，问题源于该搜索框。

首先，这是代码中有趣的部分。

for (var index = 0; index < size; index++) {
if (!filterBy || filterBy == undefined) {
filteredIndexes.push(index);
}
else {
var backendInfo = this._dataList[index];
var userListMap = hostInfo.userList;
var userListArr = Object.values(userListMap);

function checkUsers(){
for (var key in userListArr) {
if (userListArr.hasOwnProperty(key) && userListArr[key].text.toLowerCase().indexOf(filterBy) !== -1) {
return true;
}
}
return false;
}

if (backendInfo.firstName.indexOf(filterBy) !== -1 || backendInfo.lastName.toLowerCase().indexOf(filterBy) !== -1 || backendInfo.countryOrigin.toLowerCase().indexOf(filterBy) !== -1
|| backendInfo.userListMap.indexOf(filterBy) !== -1) {
filteredIndexes.push(index);
}
}
}

这会被呈现，如果您在表中输入某些内容，最后一部分将引发错误，并且列在给定单元格中返回null。

问题是，如果我将最后一部分更改为.，我可以使代码工作。

try {
if (backendInfo.firstName.indexOf(filterBy) !== -1 || backendInfo.lastName.toLowerCase().indexOf(filterBy) !== -1 ||    backendInfo.countryOrigin.toLowerCase().indexOf(filterBy) !== -1
|| backendInfo.userListMap.indexOf(filterBy) !== -1) {
filteredIndexes.push(index);
}
}
catch(err) {
console.log('Exception')
}

使用 try/catch，它按预期工作 100% 并处理返回 null 的索引...但这不能成为正确处理它的方法 - 我假设这种异常处理应该是针对罕见的异常，并且不应该像后端那样真正用于前端。

如何在不使用 try/catch 的情况下处理标题中的错误？

Answer 1

你使用的是indexOf，所以要确保这些值不会被undefined or null，你可以通过像这样对每个值进行检查来解决它：

let {firstName, lastName, countryOrigin, userListMap} = backendInfo;
if ((firstName && firstName.indexOf(filterBy) !== -1) 
|| (lastName && lastName.toLowerCase().indexOf(filterBy) !== -1) 
|| (countryOrigin && countryOrigin.toLowerCase().indexOf(filterBy) !== -1)
|| (userListMap && userListMap.indexOf(filterBy) !== -1)) {
filteredIndexes.push(index);
}

或者解决这个问题的其他方法是，你定义的这些变量的默认值firstName, lastName, countryOrigin, userListMap，如果它们是数组，那么它应该是[]，如果是字符串，那么它应该是''。