反应原生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不会更新排序或检索新数据后

回答

相关问题