无法读取未定义的属性 'toJS'

Question

我有两个数组。但是当其中之一为 null 时，会出现以下错误：

Cannot read property 'toJS' of undefined in that line

这是触发错误的相关调用：{groupsGuney.toJS()}

这是我对变量的声明let groupsGuney, groupsKuzey;

最后是我的两个数组。但是当其中之一为 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 of undefined poops 本身真的很难，并且在所有地方正确初始化会有所帮助，但不会捕获所有边缘情况。我只想要数据或 undefined 没有任何破损。如果我希望它进行更改，特定的类型检查会让我稍后做更多的工作。

这个更宽松的版本比特定类型检查解决了更多的边缘情况（即使不是全部，也有大多数扩展类型 Iterable 具有 .get，并且所有数据最终都得到了）比特定类型检查（通常只在您尝试更新时节省您的时间）类型错误等）。

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

只要给我我想要的，否则就告诉我不。不要爆炸。我相信下划线也做了类似的事情。

无法读取未定义的属性 'toJS'

Cannot read property 'toJS' of undefined

reactjs

immutable.js

react-redux

无法读取未定义的 属性 'toJS'

Cannot read property 'toJS' of undefined

reactjs

immutable.js

react-redux

无法读取未定义的属性 'toJS'