ReactネイティブでListViewを列挙するのに問題がある

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

あなたの問題はreact-nativeのListViewを使用に関するものではありません、あなたは基本的にリアクトで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()機能で：

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

ボーナスポイント1：あなたはあなたのコンポーネントの外側を定義することができます。

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

IDの比較に注目してください。それはあなたの人生を楽にします。

ボーナスポイント2：再レンダリングするたびにcloneWithRowsを使用したくないですか？ https://github.com/reactjs/redux/issues/683をチェックしてください（私はそれが問題になるとは思わないが）。

---

もう一つの可能​​性は、あなたがこのrankが0で開始し、その後、それをあなたがリストに新しい項目を追加するたびにインクリメントしたいということです。その後：

this.state = { 
    rank: 0, 
    users 
} 

ユーザーを追加すると、あなたのコード内のいくつかの場所で、あなたが呼び出す必要があります：並べ替えの問題が

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

---

は何ですか？あなたがsliceのようなものを呼び出していない場合は、ソートはあなたの状態を直接変異させるだろう、ここ

_sortByScore() { 
    this.setState({ 
    users: this.state.users.slice().sort((a, b) => a.score - b.score) 
    }) 
} 

慎重に：あなたは、あなたがそれをクリックすると、それはのような何かを行う必要があり、「スコアで並べ替え」と呼ばれるボタンを持っている想像してみて。