Question

我刚刚启动了React JS，所以我不习惯语法。

基本上，长话短说，我不知道在哪里放数字++迭代器。每当我的this.state = {rank：number}

中添加新的列表项行时，我希望我的数字增加

这应该很简单，但我似乎无法弄清楚如何在我的ListView中插入数字迭代函数。请帮忙！

另外，如果你也知道如何按分数对ListView进行排序，这对我的项目有很大帮助。我听见了。

这是我的代码：

const users = [
  {id:1, name: "Jerry Love", score: 12},
  {id:2, name: "Bob Billy", score: 10},
  {id:3, name: "Santana Diego", score: 1},
  {id:4, name: "Thompson Merlin", score: 6},
  {id:5, name: "Harold Davis", score: 3},
  {id:6, name: "Raritan Junior", score: 9},
  {id:7, name: "Caroline Anderson", score: 19},
  {id:8, name: "Haly Edison", score: 14},

]

class GlobalRankView extends Component {
  constructor(props){
    super(props)
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.state = {
      rank: number,
      matchedusersDataSource: ds.cloneWithRows(users)
    }
  }

  render() {
    return (
      <View style={styles.rankingContainer}>
        <View style={styles.rankingHeaderRow}>
          <Text style={styles.headerText}>Rank</Text>
          <Text style={styles.headerText}>User</Text>
          <Text style={styles.headerText}>Trophies</Text>
        </View>
        <ListView
          dataSource={this.state.matchedusersDataSource}
          renderRow={(user) => { return this.renderuserRow(user) }}
        >
        </ListView>
      </View>
    )
  }

  renderuserRow(user) {
    return(
      <View style={styles.userRow}>
        <Text>{this.state.rank}</Text>
        <View styles={styles.userColumn}>
          <Text style={styles.userName}> {user.name}</Text>
          <Text style={styles.userDistance}> {user.score}</Text>
        </View>
      </View>
    )
  }
}

Answer 1

您的问题与使用ListView的{{1}}无关，您在React中基本上遇到了react-native和state概念的问题。

根据我的理解，您说您有一个项目列表，您可以在其中添加其他项目。首先，我会让props更简单：

state

您this.state = { users }中不需要rank，因为可以使用state进行计算。因此你可以这样做：

在this.state.users.length：

中

renderUserRow

在// Change this <Text>{this.state.rank}</Text> // For <Text>{this.state.users.length}</Text>函数中：

render()

奖励点1：您可以在组件外部进行定义：

render() {
  return (
    ...
    const data = dataSource.cloneWithRows(this.state.users)
    <ListView
       dataSource={data}
       renderRow={(user) => { return this.renderuserRow(user) }}
    >
    ...

注意id比较，它会让你的生活更轻松。

加分点2：每次重新渲染时都不想使用const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1.id !== r2.id, });？查看https://github.com/reactjs/redux/issues/683（虽然我怀疑这是一个问题）。

另一种可能性是，您希望此cloneWithRows从0开始，然后在每次向列表中添加新项目时将其递增。然后：

rank

当您添加用户时，您需要在代码中的某个位置调用：

this.state = {
  rank: 0,
  users
}

排序有什么问题？想象一下，您有一个名为“按分数排序”的按钮，当您单击它时，它应该执行以下操作：

this.setState({ rank: this.state.rank + 1 })

在这里小心，如果你不打电话给_sortByScore() { this.setState({ users: this.state.users.slice().sort((a, b) => a.score - b.score) }) }，这种排序会直接改变你的状态。

在React Native中枚举ListView时遇到问题

1 个答案: