Realm React-Native ListView中链接对象的属性返回undefined(错误:undefined不是对象) [英] Linked objects' properties in Realm React-Native ListView return undefined (error: undefined is not an object)

问题描述

我试图通过父对象访问链接对象的属性，但是我只能返回未定义状态. 这是ListView的renderRow方法/prop中的代码(我正在使用Realm ListView).在android上，尚未测试iOS. 获取链接的对象本身似乎工作正常.这里是一些(修剪过的)代码上下文:

I'm trying to access the properties of a linked object through the parent object, but I only get back undefined. This is code within the renderRow method/prop of ListView (I am using the Realm ListView). On android, haven't tested iOS. Getting the linked object itself seems to work fine. Heres some (trimmed) code context:

// 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>
  );
}

在领域中四处逛逛，向我展示了两个对象都正确地实例化了所有属性.

Poking around the realm shows me that both objects appear correctly instantiated with all properties.

我可以很好地访问每个Item字符串和数字属性(即item.name).
尝试item.department返回一个RealmObject，假定是链接的对象.
item.department.name引发错误未定义不是对象(正在评估'item.department.name')"

I can access each Item string and number properties fine (i.e. item.name).
Trying item.department returns a RealmObject, assumedly the one that is linked.
item.department.name throws the error "undefined is not an object (evaluating 'item.department.name')"

此功能在renderRow之外正常工作.

漫长的搜索过程使我认为问题出在renderRow内的console.log中:

The long path of poking around has lead me to think the issue lies within this console.log from within renderRow:

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:

Interestingly enough the ListView works fine despite renderRow being called several times with nothing and undefined. As soon as I attempt item.department.name though:

红色的死亡屏幕-未定义不是对象

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

Any feedback and suggestions would be appreciated! Is this a bug with Realm RN ListView or is this working as intended, but my implementation is wrong?

更新: 现在进行了肮脏的工作:

UPDATE: Got a dirty work around for now:

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.保留科学知识的日志行，显示为什么此修复有效/如果您使用控制台在控制台中观看，则该错误

Basically just checking if the code property of item is truthy or not. Skips the first renderRows. Kept the log lines in for science, shows why this fix works/the bug if you watch in console with

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

推荐答案

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

So the following is the constructor that was being used in the project. Don't put your dataSource into your dataSource. Otherwise ListView will call renderRow with properties of the DataSource Object as arguments, leading to all the odd behaviour in the original question.

  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),
    });
  }

改为使用数据设置dataSource的状态:

Set state of dataSource with data instead:

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

结果是我的dataSource设置不是很标准！

Turns out my dataSource setup wasn't quite standard!

这篇关于Realm React-Native ListView中链接对象的属性返回undefined(错误:undefined不是对象)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！