javascript - react 错误 : TypeError: Cannot read property 'toLowerCase' of null

Question

我正在研究 reactjs 中的搜索过滤器，目前在第一次或第二次尝试时，当用户输入它工作正常的值时，但是当用户在第三次尝试中输入一些文本时，它会生成错误 TypeError: Cannot read property '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)

  }

Answer 1

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

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

(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 是异步的，因此您要检查的值不会存在。您有变量 filtered，所以请使用它。

if (!filtered.length)