listview - Realm React-Native ListView 中的链接对象属性返回未定义(错误 : undefined is not an object)

Question

我试图通过父对象访问链接对象的属性，但我只返回未定义。 这是 ListView 的 renderRow 方法/ Prop 中的代码(我使用的是 Realm ListView)。在安卓上，尚未测试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>
  );
}

在 Realm 中四处探索，我发现这两个对象都正确地实例化了所有属性。

我可以很好地访问每个项目字符串和数字属性(即项目名称)。
尝试 item.department 返回一个 RealmObject，假设是链接的那个。
item.department.name 抛出错误“未定义不是一个对象(评估 '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),
    });
  }

使用 data 设置 dataSource 的状态:

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

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