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 的 indexOf...但这不可能是正确处理它的方法 - 我假设这种异常处理是，嗯，应该用于罕见的异常(exception)情况，并且不应该像后端那样在前端使用。

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

Answer 1

您正在使用indexOf，因此请确保值不会未定义或为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，如果它们是数组，则应为[]，如果是字符串，那么它应该是 ''。