Question

我正在开发一个带有ListView的本机应用，用户可以对其进行排序。该应用程序也经常轮询新数据。数据是一个对象数组，从应用程序获取的某些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']
        }
    }

刷新/排序数组并将其克隆到DataSource （按下按钮或拉入新数据时触发）

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那样简单的事情。

提前致谢。

Answer 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

Answer 2

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

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

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

2 个答案: