对本机列表视图进行排序

Question

我正在尝试在我的 react-native 中对列表进行排序 View
- 触发 sortArrayAsc 函数的 onClick 正在工作
- sortArrayAsc 结果集正在运行
- 取消注释调试器部分显示数据源中的值是新排序的顺序
我遇到的问题是，我认为使用 setState 会自动重新呈现列表......这并没有发生。

如果没有，有什么想法我缺少什么或该怎么办？
非常感谢任何指导/代码更新
干杯

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);

    dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 } );
    sortedData = data;
    this.state = { dataSource: dataSource.cloneWithRows(sortedData) };
  }

  sortArrayAsc(array, key) {
    return array.sort(function (a,b) {
      console.info(b.amount)
      return b.amount < a.amount ? -1
           : b.amount > a.amount ? 1
           : 0
    })
  }

  _onPress() {
    sortedData = this.sortArrayAsc(sortedData, 'amount')
    let dataSource = this.state.dataSource.cloneWithRows(sortedData)
    //debugger
    this.setState = ( this.state.dataSource: dataSource )
  }

  _renderRow (rowData, sectionID) {
    return (
      <ListItem
        ... 
        onPress = { () => { this._onPress() } }
        ...
      />
    )
  }


  render() {
    return (
      <View>
        <List>
          <ListView
            dataSource = {this.state.dataSource}
            renderRow = {this._renderRow.bind(this)}
          />
        </List>
      </View>
    )
  }

};

Answer 1

对于setState，你能试试这个吗：

this.setState({ dataSource: dataSource });

Answer 2

尝试在渲染中记录一个控制台

console.log(this.state.dataSource);

查看它在渲染时是否打印出正确的值。要确保数据源仅在 this.state.dataSource.cloneWithRows(sortedData) 之后设置新值，请将 setState 写入回调函数。

Answer 3

let  ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 } );
export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    sortedData = data;   // this line seems redundent you can remove this
    this.state = { dataSource:ds.cloneWithRows(data) };//I used ds, just for the shake of name
  }

  sortArrayAsc(array, key) {
    return array.sort(function (a,b) {
      console.info(b.amount)
      return b.amount < a.amount ? -1
           : b.amount > a.amount ? 1
           : 0
    })
  }

  _onPress() {
    sortedData = this.sortArrayAsc(sortedData, 'amount')
    //no need of these lines
    /*let dataSource = //      this.state.dataSource.cloneWithRows(sortedData)*/
    
    //debugger
    //this.setState = ( this.state.dataSource: dataSource )
    /*you should look in the react doc for setState(https://facebook.github.io/react/docs/react-component.html), you may be trying to use 
this.setState((prevState, props) => {
  return {myInteger: prevState.myInteger + props.step};
});*/
    this.setState({
      dataSource:ds.cloneWithRows(sortedData)
    });
  }

  _renderRow (rowData, sectionID) {
    return (
      <ListItem
        ... 
        onPress = { () => { this._onPress() } }
        ...
      />
    )
  }


  render() {
    return (
      <View>
        <List>
          <ListView
            dataSource = {this.state.dataSource}
            renderRow = {this._renderRow.bind(this)}
          />
        </List>
      </View>
    )
  }

};

Answer 4

您可以尝试将 array 传递给 dataSource.cloneWithRows（数组）而不是 object 吗？

我不确定你的 sortedData 是 array 还是 object。

因为 ListView 我也有问题。呈现的项目与我提供的数据的排序方式不同。

这是我的数据：

let data = {
    key1: object,
    key2: object,
    key3: object,
    key4: object,
    key5: object,
    key6: object
}

这是我使用以下方法记录结果时发现的：

console.log(Object.keys(data))

结果是：

["key3", "key1", "key5", "key4", "key2"]

这与ListView中呈现的项目的顺序相同。所以，我更改了我的代码：

const dataSource = new ListView.DataSource(
    rowHasChanged: (r1, r2) => (r1 !== r2)
})
this.setState({
    ds: dataSource.cloneWithRows(data)
})

至：

let dataArray = []

// Sort the keys out
let keys = Object.keys(data).sort()

// Push them into dataArray
keys.forEach(key => dataArray.push(data[key]))

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

// Now I am passing array datatype instead of object datatype.
this.setState({
    dataSource.cloneWithRows(dataArray)
})

我的问题解决了。

对本机列表视图进行排序

sorting a react-native listview

listview

listitem

react-native