React Native ListView 在排序或检索新数据后不会更新答案

【问题标题】：React Native ListView won't update on sorting or after retrieving new dataReact Native ListView 在排序或检索新数据后不会更新
【发布时间】：2016-02-25 12:05:16
【问题描述】：

我正在开发一个带有 ListView 的 react 本机应用程序，用户可以对其进行排序。该应用程序也经常轮询新数据。数据是一个对象数组，从应用程序获取的一些 JSON 中解析出来。但是，该列表实际上不会在这两种情况下都更新。

我在克隆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 这样简单的事情。

提前致谢。

【问题讨论】：

可以展示list ire数据源的初始化吗？
您好，感谢您的回答！我在我的问题中添加了一些代码。

标签： javascript listview react-native

【解决方案1】：

尝试在构造函数之外定义 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

【讨论】：

这并没有什么不同。不过谢谢你的回答。
另一种选择，尝试在您的 refreshList 函数中重置您的数据源，如下所示：this.setState({ dataSource: ds.cloneWithRows(data) }) 我还更新了我的代码和示例。
不幸的是，这也不行
嗯。我假设你确定数据是从 api 传回来的？
我是。我在应该在 ListView 中替换它的那一刻记录数据。这实际上是我所期待的数据。如果您更改它的排序方式，它不会更改行。然而，它背后的数据似乎确实发生了变化，因为它在点击时会显示错误的页面。

【解决方案2】：

我解决了我的问题，我很惭愧，真的。毕竟问题不在于 ListView。我的单元格在挂载时将数据保存到状态中，但在获取新道具时没有更新。

我刚刚从状态中删除了数据，并在我的单元格中使用了道具。这使它按预期工作。

【讨论】：