未定義の 'toJS'プロパティを読み取れません

Question

私は2つの配列を持っています。そのうちの一つがnullのときしかし、それは次のエラーを与える：{groupsGuney.toJS()}

はここで変数let groupsGuney, groupsKuzey;

の私の宣言だと最終的にここに私は：

Cannot read property 'toJS' of undefined in that line

ここでエラーをトリガし、関連するコールです2つのアレイ。しかし、それらのいずれかがNULLの場合、それはエラーを与える：

... 
    if (muso == 1) { 
     groupsGuney = this.props.groups 
     .groupBy((group, idx) => idx % maxRows) 
      .map((ggs, idx) => { 
      return this.renderGroups(ggs, idx); 
      }).toList().flatten(true); 
    } 

    if (muso == 2) { 
     groupsKuzey = this.props.groups 
     .groupBy((group, idx) => idx % maxRows) 
      .map((ggs, idx) => { 
      return this.renderGroups(ggs, idx); 
      }).toList().flatten(true); 
    } 

    var result = (
     <div> 
     <div className={classSelector + ' discard-mini-box-area'} > 
      { groupsGuney.toJS() } 
     </div> 
     <div className={classSelector + ' discard-mini-box-area'} > 
      { groupsKuzey.toJS() } 
     </div> 
     </div> 
    ); 

    return result; 
    } 
} 

export default DiscardMiniBoxArea; 

Answer 1

の代わりにやって：あなたがすべき

<div> 
    <div className={classSelector + ' discard-mini-box-area'} > 
    {groupsGuney.toJS()} 
    </div> 
    .... 

を：

<div> 
    <div className={classSelector + ' discard-mini-box-area'} > 
    {groupsGuney && groupsGuney.toJS()} 
    </div> 
    .... 

あなたのオブジェクトに関数を呼び出す前に、あなたをそこにいることを確認する必要があります。あなたのオブジェクトが常に機能しているかどうか不明な場合は、toJSが存在し、有効な機能であることを確認するチェックが必要です。

そのような場合のために、容器内の何更新：何をレンダリングしたいことがない場合

{groupsGuney && typeof groupsGuney.toJS === 'function' && groupsGuney.toJS()} 

しかし、理想的に、あなたはすべてのこの特定のグループではレンダリングされません。これらのチェックは、コンポーネントをレンダリングする前に移動する必要があります。ここ

Answer 2

私の動機はほとんど未定義の糞は本当にハード自体の私のコールに.getということで、あらゆる場所に適切に初期化することができますが、すべてのエッジケースをキャッチしません。私はちょうど破損することなく、データまたは未定義が欲しいです。特定の型チェックによって、後で変更を加えたい場合、後でもっと多くの作業を行うことができます。

この緩いバージョンでは、特定のタイプのチェックよりも多くのエッジケースを解決します（ほとんどすべてのタイプの拡張がIgetableで、すべてのデータが最終的に取得されます）（通常は間違ったタイプなど）。

/* getValid: Checks for valid ImmutableJS type Iterable 

    returns valid Iterable, valid Iterable child data, or undefined 

    Iterable.isIterable(maybeIterable) && maybeIterable.get(['data', key], Map()), becomes 
    getValid(maybeIterable, ['data', key], Map()) 

    But wait! There's more! As a result: 
    getValid(maybeIterable) returns the maybeIterable or undefined 
    and we can still say getValid(maybeIterable, null, Map()) returns the maybeIterable or Map()   */ 

export const getValid = (maybeIterable, path, getInstead) => 
    Iterable.isIterable(maybeIterable) && path 
    ? ((typeof path === 'object' && maybeIterable.getIn(path, getInstead)) || maybeIterable.get(path, getInstead)) 
    : Iterable.isIterable(maybeIterable) && maybeIterable || getInstead; 


//Here is an untested version that a friend requested. It is slightly easier to grok. 

export const getValid = (maybeIterable, path, getInstead) => { 
    if(valid(maybeIterable)) {     // Check if it is valid 
    if(path) {          // Check if it has a key 
     if(typeof path === 'object') {  // Check if it is an 'array' 
     return maybeIterable.getIn(path, getInstead) // Get your stuff 
     } else { 
     maybeIterable.get(path, getInstead)   // Get your stuff 
     } 
    } else { 
     return maybeIterable || getInstead;     // No key? just return the valid Iterable 
    } 
    } else { 
    return undefined;      // Not valid, return undefined, perhaps should return false here 
    } 
} 

私に何を求めているのかを教えてください。爆発しないでください。アンダースコアも同様のことをすると私は信じている。