Javascript：未捕获的 TypeError：无法读取 null 的属性“indexOf”

Posted 2023-02-21

【中文标题】Javascript：未捕获的 TypeError：无法读取 null 的属性“indexOf”

【英文标题】：Javascript: Uncaught TypeError: Cannot read property 'indexOf' of null

【发布时间】：2017-07-15 03:16:29

【问题描述】：

我正在用数据填充表格 - 使用 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...但这不是正确处理它的方法 - 我假设这种异常处理是，嗯，应该用于罕见的例外情况，并且不应该像后端一样在前端使用。

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

【问题讨论】：

为变量提供值

【参考方案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 专家来说不是很直观，但感谢上帝......这让我发疯了。谢谢！！

这是最基本的，可能还有其他更好的方法：）js专家也会提供，直到使用基本的：）