ReactJS Ошибка: TypeError: Невозможно прочитать свойство 'toLowerCase' со значением NULL

Question

Я работаю над поисковым фильтром в activjs, в настоящее время с первой или второй попытки, когда пользователь вводит значение, оно работает нормально, но когда пользователь вводит какой-то текст с третьей попытки, генерируется ошибка, TypeError: Cannot read property 'toLowerCase' of 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||'').toLowerCase().indexOf(keyword)

Answer 2

Проблема у вас в том, что все, что задает данные, устанавливает свойства равными нулю.Поэтому, когда вы проверяете это, он выдает ошибку.

Вы можете усложнить свой код и проверить, насколько он правдив, прежде чем делать это.

(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']

И в своем коде фильтра используйте some и loop over и посмотрите, верны ли они и соответствуют ли они

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)

Answer 3

Вам необходимо добавить проверку перед вызовом toLowerCase, поскольку это доступно только для только строки

let a  = ''
let b = undefined
let c = [1,2,3]
let d = null
let 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())