如何更新React-Native listview？

當行被添加到我的列表視圖時，我有奇怪的行爲。我不確定我的邏輯錯在哪裏。我有使用react-native-tab-view的選項卡。選項卡上的2我增加了對象「收藏夾」陣列已經被標籤上顯示4之前我添加的是什麼顯示如何更新React-Native listview？

的對象，這是我後添加的對象並返回爲製表4這是我看到

和代碼

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) 

constructor(props) { 
    super(props) 
    this.state = { 
     favoriteDB: props.favorites, 
     renderPlaceholder: true, 
     dataSource: ds.cloneWithRows([]) 
    } 
    } 

componentDidMount() { 
    InteractionManager.runAfterInteractions(() => { 
     this.setState({ 
     dataSource: ds.cloneWithRows(this.state.favoriteDB), 
     renderPlaceholder: false 
     }) 
    }) 
    } 

    componentWillReceiveProps(prevProps) { 
    const {favorites} = this.props 

    if (JSON.stringify(favorites) != JSON.stringify(prevProps.favorites)) { 
     this._updateFavorites() 
    } 
    } 

    _updateFavorites() { 
    const {favorites} = this.props 

    this.setState({ 
     favoriteDB: favorites, 
     dataSource: ds.cloneWithRows(favorites) 
    }) 
    } 

render() { 
    const {dataSource} = this.state 
    const {visibleHeight, visibleWidth} = this.props 

    if (this.state.renderPlaceholder) 
     return <Placeholder/> 

    return (
     <Container theme={theme}> 
     <View style={{ flex:1, height: visibleHeight - 100, width: visibleWidth }}> 
      <Row> 
      <Col> 
       <List> 
       <ListView 
        style={{ height: visibleHeight - 100, width: visibleWidth }} 
        enableEmptySections={TRUE} 
        automaticallyAdjustContentInsets={FALSE} 
        initialListSize={100} 
        pageSize={100} 
        dataSource={dataSource} 
        renderRow={rowData => this._renderRow(rowData)}/> 
       </List> 
      </Col> 
      </Row> 
     </View> 
     </Container> 
    ) 
    }

來源

2017-01-19 texas697

在_updateFavorites，如果你'的console.log（收藏夾）'，你得到的物品全陣列或只是增加了一個？ –

整個陣列 – texas697

@MattAft'BAKER，MARLENE J'上方的可疑空間，那是什麼？ –

我過的T他添加和刪除行到cloneWithRows的輸入與ListView以及新的SectionList的數據數組。

我的解決方法是爲ListView添加一個關鍵字，該關鍵字在數據源更改（名稱和大小工作）時發生更改。

return (
    <SectionList 
     key={"mylistview_" + this.props.maps.length} 
     style= 
    ...

見https://stackoverflow.com/a/31481960/7223

來源

2017-06-08 00:31:36 navicore

如何更新React-Native listview？

回答

相關問題