Javascript ReactJS错误：TypeError:无法读取属性'；toLowerCase'；空的

我正在reactjs中使用搜索过滤器，目前在第一次或第二次尝试时，当用户输入值时，它工作正常，但当用户在第三次尝试时输入一些文本时，它会生成错误，即

TypeError:Cannot read属性'toLowerCase'为null

。我将提供我的逻辑作为一个代码可以有人请帮助我如何解决这个问题。我是ReactJS新手，没有太多的知识来解决这个问题

代码

    searchHandler(event) {
    let keyword = event.target.value;
    clearTimeout(this.typingTimer);
    this.typingTimer=setTimeout(()=>{
      let filter= {

        "where": {
          "or": [
            {
              "companyName":{"regexp":keyword +"/i"}
            },
            {
              "primaryPhone":{"regexp":keyword +"/i"}
            },
            {
              "emailAddress":{"regexp":keyword +"/i"}
            },
            {
              "venueCode":{"regexp":keyword +"/i"}
            },
            {
              "website":{"regexp":keyword +"/i"}
            },
          ]
        }
      }

      this.props.getParties(filter);
      let filtered = this.state.data.filter(item => {
        return (
          item.companyName.toLowerCase().indexOf(keyword) > -1 ||
          item.primaryPhone.toLowerCase().indexOf(keyword) > -1 ||
          item.emailAddress.toLowerCase().indexOf(keyword) > -1 ||
          item.venueCode.toLowerCase().indexOf(keyword) > -1 ||
          item.website.toLowerCase().indexOf(keyword) > -1 ||
          item.description.toLowerCase().indexOf(keyword) > -1
        );
      });

      if (keyword === "") {
        filtered = [];
        this.getData();
      }

      this.setState({
        filtered,
      });
      const { skip } = this.state;
      if(this.state.filtered.length>0 || !this.state.filtered.length){
        this.setState({
          filtered:[],
          skip: skip - skipDecrement
        })
      }
    },550)

  }

---

您需要在调用

toLowerCase

之前添加check，因为这仅适用于字符串

a=''
设b=未定义
设c=[1,2,3]
设d=null
让e='HELLO'
typeof a=='string'&&a&&console.log（a.toLowerCase（））
typeof b=='string'&&b&&console.log（b.toLowerCase（））
typeof c=='string'&&c&&console.log（c.toLowerCase（））
typeof d=='string'&&d&&console.log（d.toLowerCase（））
typeof e=='string'&&e&&console.log（e.toLowerCase（））

以防未设置对象值：

---

（item.companyName | |“”）.toLowerCase（）.indexOf（关键字）

您遇到的问题是，设置数据的内容就是将属性设置为null。所以当你检查它时，它会抛出一个错误

您可以使代码复杂化，并在执行之前检查代码是否真实

(item.companyName && item.companyName.toLowerCase().indexOf(keyword) > -1) ||
(item.primaryPhone && item.primaryPhone.toLowerCase().indexOf(keyword) > -1) ||

就个人而言，我不会这样做，我会使用

some

和

includes

定义要检查的字段数组

const fields = ['companyName','primaryPhone','emailAddress','venueCode','website','description']

在你的过滤代码中，使用一些并循环，看看它们是否真实，是否匹配

let filtered = keyword.length
  ? this.state.data.filter(item =>
      fields.some(prop =>
        item[prop] && item[prop].toLowerCase().includes(keyword)
      )
    )
  : []

---

代码的下一个问题是

if(this.state.filtered.length>0 || !this.state.filtered.length)

第一个语句表示如果大于零，第二个语句表示为零。所以我不确定你期望发生什么

下一个问题是您正在阅读this.state.filtered。问题是您使用

this.setState（..）

将其设置在正上方。问题是setState是异步的，所以您要检查的值不在那里。您对变量

进行了筛选

，因此请使用它

if (!filtered.length)

---

表示item.XYZ中有一个为空是的，我不知道为什么它显示为空。不管设置什么，它都会将空放在其中……请不要更改问题中的代码，这样会使答案无效。另外，不要发布重复的问题。@epascarello也添加了null，但我希望从上面的示例中可以清楚地看出sweel错误已经消失，但这个表达式不起作用。请检查一下（this.state.filtered.length>0 | |！this.state.filtered.length）{this.setState（{filtered:[]，skip:skip-skipDecrement}）对不起，我不明白你的意思？如果你能给我提供一个更完整的代码片段，我也许能帮你：）我们能做10分钟的teamviewer会话吗？如果可能的话，你可以提供一个提琴，你可以使用一个像这样的网站，在你的问题中分享一个链接