Realm React-Native ListView 中链接对象的属性返回未定义（错误：未定义不是对象）

Question

我试图通过父对象访问链接对象的属性，但我只返回未定义。 这是 ListView 的 renderRow 方法/属性中的代码（我使用的是 Realm ListView）。在 Android 上，尚未测试 iOS。 获取链接对象本身似乎工作正常。下面是一些（修剪过的）代码上下文：

// Schemas being used to create realm (trimmed down to relevant)

class Item {};
Item.schema = {
  name: 'Item',
  primaryKey: 'id',
  properties: {
    id: 'string',
    name: 'string',
    department: 'ItemDepartment',
  }
}

class ItemDepartment {};
ItemDepartment.schema = {
  name: 'ItemDepartment',
  primaryKey: 'id',
  properties: {
    id: 'string',
    name: 'string',
    parentDepartment: 'ItemDepartment'
  }
}

// renderRow method (trimmed but same error thrown)
renderRow(item) {
  return (
    <Text>{item.department.name}</Text>
  );
}

在领域中探索表明，这两个对象都正确地实例化了所有属性。

我可以很好地访问每个项目字符串和数字属性（即 item.name）。
尝试 item.department 返回一个 RealmObject，假设是链接的那个。
item.department.name 抛出错误“undefined is not an object (evalating 'item.department.name')”

这在 renderRow 之外可以正常工作。

长时间的探索让我认为问题出在 renderRow 中的这个 console.log 中：

renderRow(item) {
  console.log('item.name:       ' + item.name)
  console.log('item.department: ' + item.department)
  return (
    <Text>{item.name}</Text>
  );
}

结果：

ReactNativeJS: Running application “undisclosed” with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
ReactNativeJS: item.name:       
ReactNativeJS: item.department: undefined
ReactNativeJS: item.name:       defaultGetRowData
ReactNativeJS: item.department: undefined
ReactNativeJS: item.name:       
ReactNativeJS: item.department: undefined
ReactNativeJS: item.name:       defaultGetSectionHeaderData
ReactNativeJS: item.department: undefined
ReactNativeJS: item.name:       undefined
ReactNativeJS: item.department: undefined
ReactNativeJS: item.name:       undefined
ReactNativeJS: item.department: undefined
ReactNativeJS: item.name:       undefined
ReactNativeJS: item.department: undefined
ReactNativeJS: item.name:       undefined
ReactNativeJS: item.department: undefined
ReactNativeJS: item.name:       MockItem1
ReactNativeJS: item.department: [object RealmObject]
ReactNativeJS: item.name:       MockItem2
ReactNativeJS: item.department: [object RealmObject]
ReactNativeJS: item.name:       MockItem3
ReactNativeJS: item.department: [object RealmObject]

有趣的是，尽管 renderRow 被多次调用但没有任何内容且未定义，但 ListView 工作正常。不过，只要我尝试 item.department.name ：

Red Screen of death - undefined is not an object

任何反馈和建议将不胜感激！这是 Realm RN ListView 的错误，还是按预期工作，但我的实现有误？

更新： 现在有一个肮脏的工作：

getItemDepartmentName(item) {
  let code = item.code;
  console.log("item:      " + item)
  console.log("code:      " + code)
  console.log("typeofX:   " + typeof code)
  if (code) {
    console.log("code True: true")        
    return item.department.name
  }
  console.log("code True: false");
  return "Undefined"
}

renderRow(item) {
  return(
    <Text>{this.getItemDepartmentName(item)}</Text>
  )
}

// for this to work you must bind this on renderRow in listView:
<ListView
  ...
  renderRow={this.renderRow.bind(this)}
.../>

基本上只是检查 item 的 code 属性是否为真。跳过第一个 renderRows。保留日志行以供科学使用，说明此修复为何有效/如果您在控制台中观看时的错误

adb logcat ReactNative:V ReactNativeJS:V

为了可读性而整理

ReactNativeJS: item:      function (row1, row2) {return row1!==row2;}
ReactNativeJS: code:      undefined
ReactNativeJS: typeofX:   undefined
ReactNativeJS: code True: false
ReactNativeJS: item:      function defaultGetRowData(dataBlob, sectionID, rowID) {
ReactNativeJS: return dataBlob[sectionID][rowID];}
ReactNativeJS: code:      undefined
ReactNativeJS: typeofX:   undefined
ReactNativeJS: code True: false
ReactNativeJS: item:      function () {return false;}
ReactNativeJS: code:      undefined
ReactNativeJS: typeofX:   undefined
ReactNativeJS: code True: false
ReactNativeJS: item:      function defaultGetSectionHeaderData(dataBlob, sectionID) {
ReactNativeJS: return dataBlob[sectionID];}
ReactNativeJS: code:      undefined
ReactNativeJS: typeofX:   undefined
ReactNativeJS: code True: false
ReactNativeJS: item:      
ReactNativeJS: code:      undefined
ReactNativeJS: typeofX:   undefined
ReactNativeJS: code True: false
ReactNativeJS: item:      
ReactNativeJS: code:      undefined
ReactNativeJS: typeofX:   undefined
ReactNativeJS: code True: false
ReactNativeJS: item:      
ReactNativeJS: code:      undefined
ReactNativeJS: typeofX:   undefined
ReactNativeJS: code True: false
ReactNativeJS: item:      
ReactNativeJS: code:      undefined
ReactNativeJS: typeofX:   undefined
ReactNativeJS: code True: false
ReactNativeJS: item:      [object RealmObject]
ReactNativeJS: code:      MI1
ReactNativeJS: typeofX:   string
ReactNativeJS: code True: true
ReactNativeJS: item:      [object RealmObject]
ReactNativeJS: code:      MI2
ReactNativeJS: typeofX:   string
ReactNativeJS: code True: true
ReactNativeJS: item:      [object RealmObject]
ReactNativeJS: code:      MI3
ReactNativeJS: typeofX:   string
ReactNativeJS: code True: true
...

Answer 1

所以以下是项目中使用的构造函数。不要将您的数据源放入您的数据源中。否则 ListView 将使用 DataSource 对象的属性作为参数调用 renderRow，从而导致原始问题中的所有奇怪行为。

  constructor(props) {
    super(props);
    let dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    this.state = {
      dataSource: dataSource.cloneWithRows(dataSource), // Bad
      items: realm.objects('Item').sorted('name'),
    };
    this.componentDidMount = this.componentDidMount.bind(this);
  }

  componentDidMount() {
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.state.items),
    });
  }

用数据设置数据源的状态：

...
    let data = realm.objects('Item').sorted('name')
    this.state = {
      dataSource: dataSource.cloneWithRows(data),
      items: data,
    };
...

原来我的数据源设置不是很标准！

Answer 2

通过查看您的问题和日志，看起来Item 并不总是有department。

尝试 item.department 返回一个 RealmObject，假设是链接的那个。 item.department.name 抛出错误“undefined is not an object (evalating 'item.department.name')”

所以我猜你有一些代码在尝试访问item.department.name 之前没有先检查item.department 是否存在。如果 item.department 未定义，那么您收到的错误消息将是有意义的。如果这有帮助，或者我误解了什么，请告诉我！