セクションのヘッダーでレルムリストビューをレンダリングする方法

Question

私はrealm dbと反応ネイティブを使用しています。次のようにレルムスキーマは次のとおりです。

static schema = { 
    name: 'TodoItem', 
    primaryKey: 'id', 
    properties: { 
     id: {type: 'string'}, 
     value: {type: 'string'}, 
     Category: {type: 'string'}, 
     completed: {type: 'bool', default: false}, 
     createdTimestamp: {type: 'date'} 
    } 
    } 

export const todoItemDS = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2, sectionHeaderHasChanged: (s1, s2) => s1 !== s2}) 

const mapStateToProps = (state, props) => ({ 
    dataSource: todoItemDS.cloneWithRowsAndSections(todoItemsResults), 
} 

次のようにListViewのタグは次のとおりです。

<ListView 
      dataSource={dataSource} 
      renderRow={this.renderRow.bind(this)} 
      renderSectionHeader={this.renderSectionHeader.bind(this)} 
     /> 

とrenderSectionHeader：

renderSectionHeader(sectionData, category) { 
    return (
    <Text>{category}</Text> 
) 
} 

renderRow(item){ 
    const {dataSource, deleteTodoItem} = this.props 
    return (
    <View style={{ justifyContent: 'space-between',flexDirection: 'row'}}> 
     <CheckBox onPress={(e) => this.completed(item.id,item.value,e.target.checked)} style={{marginTop: 15 }}checked={item.completed} /> 
     <Text onPress={(e) => this.goToPageTwo(item.id)} style={{ alignSelf: 'center',flex:10}} >{item.value} 
     </Text> 
     <Button iconLeft large transparent primary style={{ height: 30 , flex:1 }} onPress={() => deleteTodoItem(item)}> 
      <Icon name="trash-o" style={{ color: 'red' }} /> 
     </Button> 
    </View>) 
} 

私は、この関数からデータソースtodoItems埋める：

export const getTodoItems =() => { 

    const todoItems = TodoItem.get().sorted('createdTimestamp', true); 
    return todoItems 
} 

を

ただし、行とセクションは、イメージに示されているように、空のセクションのテキストと空の行のテキストでレンダリングされます。このコードに欠けている何

とどのように私は正しくセクションと行をレンダリングすることができますか？

---

Iは次のようにデータソースを満たす領域コードにリスナーを追加した：しかし、私は、追加された項目を見ることができない

export const getTodoItems =() => { 
    console.log('create db:', Realm.path) 
    const itemData = {} 
    const todoItems = TodoItem.get().sorted('createdTimestamp', true).filtered('completed=false'); 
    todoItems.addListener((items, changes) => { 
    // Update UI in response to inserted objects 
    changes.insertions.forEach((index) => { 
    if(itemData[items[index].Category]) { 
     itemData[items[index].Category].push(items[index]) 
    } else 
     itemData[items[index].Category] = []//; 
    }); 

    // Update UI in response to modified objects 
    changes.modifications.forEach((index) => { 

    }); 

    // Update UI in response to deleted objects 
    changes.deletions.forEach((index) => { 
    // Deleted objects cannot be accessed directly 
    // Support for accessing deleted objects coming soon... 

    }); 

});; 

    todoItems.forEach((item) => { 
    if(itemData[item.Category]) { 
     itemData[item.Category].push(item) 
    } else 
     itemData[item.Category] = []//; 
    }) 
    return itemData //todoItems 
} 

。追加されたアイテムは、別のアイテムを追加した後にのみ表示されます。何か案は？

Answer 1

正しい形式でデータソースを構築しなかったため、レンダリングされたSectionHeaderが整数を表示しています。linkのマニュアルを参照してください。

あなたが何か構築する必要があります。

const todoItemsData = { 
    categoryOne: [itemOne, itemTwo], 
    categoryTwo: [itemThree, itemFour] 
} 

をしかし、今あなたが持っているもののオブジェクト[realmItemOne, realmItemTwo]の単なる配列で、あなただけが消費するつもりDataSourceを構築するためにオブジェクトの配列を渡す場合cloneWithRowsAndSections、renderSectionHeader意志でcategory paramがhereにaccroding整数インデックス、Object.keys（arrayOfObjectsが）ですから、あなたのtodoItemsResultsをマッピングし、構築したい[0, 1, 2, ...]

を返しますなり、すべてのデータの問題を示すないレンダリング行については、この

const itemData = {} 
todoItemsResults.forEach((item) => { 
    if(itemData[item.Category] { 
    itemData[item.Category].push(item) 
    } else 
    itemData[item.Category] = []; 
    } 
}); 

const mapStateToProps = (state, props) => ({ 
    dataSource: todoItemDS.cloneWithRowsAndSections(itemData), 
} 

のようなものは、私が原因同じ問題に、あなたはrenderRow内呼んでいるitem paramはあなたの1 todoItemオブジェクトのデータ属性であるべきだと思います。 {item}に{item.value}を置き換えて、実際にあなたの設定に含まれているアイテムを確認することができます。 dataSourceをフィードするための適切なデータを作成できる場合、これが解決されると私は信じています。

レルム更新にlisterningに関するあなたのフォローアップのコメントを

---

は：あなたは `todoItemsResults`、それがどのように見えるかを生成する方法 あなたは私たちを見ることができます。この

class DummyPage extends Component { 
    constructor(props) { 
    super(props) 
    this.realmUpdated = this.realmUpdated.bind(this); 
    realm.objects('todoItem').addListener('change', this.realmUpdated); 
    } 

    componentWillUnmount() { 
    realm.objects('todoItem').removeListener('change', this.realmUpdated); 
    } 

    realmUpdated() { 
    this.forceUpdate(); 
    } 

    render() { 
    //build your data source in here and render the sectionList 
    } 

}