정의되지 않은 'toJS'속성을 읽을 수 없습니다.

Question

두 개의 배열이 있습니다. {groupsGuney.toJS()}

여기에 변수 let groupsGuney, groupsKuzey;

그리고 마지막으로 여기 내입니다 내 선언은 다음과 같습니다

Cannot read property 'toJS' of undefined in that line

다음 오류를 트리거 관련 호출이있다 : 그들 중 하나가 null 때 다음과 같은 오류를 제공 두 개의 배열. 당신이 당신의 객체에 함수를 호출하기 전에

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

:

... 
    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> 
    .... 

당신이해야 할 그들 중 하나가 null 때이 오류를 제공합니다 그것이 있는지 확인해야합니다. 언제든지 함수가있는 객체가 확실하지 않으면 추가 검사가 필요합니다. 즉, toJS이 있고 유효한 함수인지 확인해야합니다.

그런 경우에는, 당신의 용기 내부에 무엇이 업데이트 : 무엇을 렌더링하고 싶은 것은이없는 경우, 이상적으로, 당신은이 모든 특정 그룹에 렌더링 할 것

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

. 구성 요소를 렌더링하기 전에이 검사를 이동해야합니다.

Answer 2

여기서 나의 동기는 정의되지 않은 것 자체가 정말로 힘들고, 모든 곳에서 제대로 초기화하는 것이 도움이되지만, 모든 엣지 경우를 잡아 내지 못한다는 것입니다. 난 그냥 데이터 또는 원하는 모든 파손없이 정의 싶어요. 특정 형식 검사를 사용하면 나중에 변경 작업을 수행하기 위해 더 많은 작업을 수행 할 수 있습니다.

이 느슨한 버전은 특정 유형의 검사 (일반적으로 .get을 사용하는 모든 유형의 Iterable을 확장하지 않고 모든 데이터를 최종적으로 가져옵니다)보다 많은 경우를 해결합니다. 잘못된 유형 등).

/* 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 
    } 
} 

내가 묻는 것을 말하거나 아니오라고 말해주세요. 폭발하지 마십시오. 나는 언더 스코어가 비슷한 것을 또한 믿는다.