反應原生ListView不會更新排序或檢索新數據後

我正在努力與ListView反應本機應用程序，用戶可以排序。應用程序每隔一段時間都會輪詢新數據。數據是一個對象數組，從應用程序獲取的某個JSON中解析出來。但是，這兩個場合都不會實際更新列表。反應原生ListView不會更新排序或檢索新數據後

我在克隆ListView.DataSource之前已經記錄了數組，並且該數組實際上是我期望的數組。然而DataSource似乎並不想更新。

我已經試過深入克隆數組，但無濟於事。

下面是一些示例代碼來演示我正在嘗試做什麼。

初始化我ListViewDataSource的：

constructor(props) { 
     super(props); 
     var ds = new ListView.DataSource({ 
      rowHasChanged: (r1, r2) => (r1.value !== r2.value) 
     }); 
     this.state = { 
      dataSource: ds, 
      sorting: 'availableCapacity', 
      sortingOptions: ['name', 'availableCapacity'] 
     } 
    }

刷新/排序的數組，並將其克隆到數據源（通過按下一個按鈕觸發，或者當新的數據被拉到）

refreshList(sortBy) { 
    if (sortBy === undefined) 
     sortBy = this.state.sortBy; 
    var array = this.props.dataToSortAndDisplay; 
    if (sortBy == 'option1') 
     array.sort(this.sortByVar1); 
    else if (sortBy == 'option2') { 
     array.sort(this.sortByVar2); 
    } 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(array) 
    }) 
}

我嘗試像這樣深度克隆我的陣列，無濟於事：

cloneData(data) { 
    if (data instanceof Array || data instanceof Object) { 
     var newData = []; 
     for (var k in data) { 
      newData[k] = this.cloneData(data[k]); 
     } 
     return newData; 
    } 
    else { 
     return data; 
    } 
}

我還試圖通過使用JSON.parse(JSON.stringify(array))來深入克隆它，因爲數據只是首先解析了JSON。也無濟於事。

有人可以指出我在這裏做錯了嗎？我越來越沮喪，無法像更新一個ListView一樣簡單。

在此先感謝。

來源

2016-02-25 stinodes

你可以顯示列表數據源的初始化嗎？ –

嘿，謝謝你的回答！我在我的問題中添加了一些代碼。 – stinodes

我解決了我的問題，我真的很慚愧。問題不在於ListView。我的單元格在掛載時將數據保存到狀態中，但在獲取新的道具時沒有更新它。

我剛剛從狀態中刪除了數據，並在我的單元格中使用了道具。這使它按預期工作。

來源

2016-02-26 08:01:45 stinodes

嘗試定義DS構造函數的變量外：

var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => (r1.value !== r2.value) }); 
class SampleApp extends React.Component{ 

    constructor(props) { 
    super(props) 
    this.state = { 
     dataSource: ds 
    } 
    } 

    componentDidMount() { 
    this.setState({ dataSource: ds.cloneWithRows(data) }) 
    } 

    render() { 
    return (
     <View style={ styles.container }> 
     <ListView 
     dataSource={ this.state.dataSource } 
     renderRow={ (rowData) => <Text>{ rowData }</Text> } 
     /> 
     </View> 
    ); 
    } 
}

設置基本的演示here。 https://rnplay.org/apps/nWjGfQ

來源

2016-02-25 15:00:55

它沒有區別。但謝謝你的答案。 – stinodes

另一個選項，嘗試在您的refreshList函數中重置您的dataSource，如下所示：'this.setState（{dataSource：ds.cloneWithRows（data）}）'我也更新了我的代碼和示例。 –

這也沒有做，不幸的是 – stinodes

反應原生ListView不會更新排序或檢索新數據後

回答

相關問題