Javascript: Uncaught TypeError: Cannot read property 'indexOf' of null

Question

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

table 有一个问题所在的搜索框。

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

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);
                }

            }
        }

如果您在 table 中输入某些内容，并且在给定单元格中输入 returns 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...但这不是正确处理它的方法 - 我假设这种异常处理是的，应该用于罕见的例外情况，不应该像后端那样在 front-end 上使用。

不使用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，如果它们是数组，则应为 []，如果是字符串，则应为 ''.

Javascript: Uncaught TypeError: Cannot read property 'indexOf' of null

Javascript: Uncaught TypeError: Cannot read property 'indexOf' of null

javascript

arrays

reactjs

fixed-data-table