2017-02-24 3 views
0

React.jsコンポーネントであるfixed-data-tableを使用して、データをテーブルに設定しています。しかし、この段階でそれほど重要ではありません。Javascript:Uncaught TypeError:nullの 'indexOf'プロパティを読み取ることができません

テーブルには、問題の原因となる検索ボックスがあります。

まず、コードの興味深い部分を示します。

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/catchで

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

は、それが意図したとおりに、100%の作品とのindexOfはnullを返すハンドル..私は最後の部分を変更した場合、私は、コードを動作させることができ、..ですしかし、これは適切に処理する方法ではありません - 私は、この種の例外処理はまれな例外であると想定されています。実際にはフロントエンドでバックエンド。

try/catchを使用せずにタイトルのエラーを処理するにはどうすればよいですか?

+0

は変数の値を提供します –

答えて

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と定義し、配列の場合は[]、文字列の場合は''とする必要があります。

+0

これは機能しました! Javascriptの非専門家にとってはあまり直感的ではありませんが、神に感謝します...これは私をナットにしています。ありがとうございました!! – cbll

+0

これは最も基本的なものですが、他のいくつかのよりよい方法が可能です:) jsのエキスパートもそれを提供します。 –

関連する問題