Проблемы с перечислением ListView in React Native

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 из react-native, вы в основном возникают проблемы с концепцией state и props в React.

Для чего я понял, вы говорите, что у вас есть список предметов, где вы можете добавить дополнительные. Прежде всего, я хотел бы сделать мой 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) }} 
    > 
    ... 

Bonus пункт 1: Вы можете определить вне вашего компонента:

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

Обратите внимание на сравнение идентификаторов, это упростит вашу жизнь.

Бонусная точка 2: вы не хотите использовать cloneWithRows каждый раз, когда вы повторно визуализируете? Отъезд https://github.com/reactjs/redux/issues/683 (хотя я сомневаюсь, что это будет проблемой).

---

Другая возможность заключается в том, что вы хотите это rank начать с 0, а затем увеличивать его каждый раз, когда вы добавляете новый элемент в список. Тогда:

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) 
    }) 
} 

Тщательный здесь, если вы не вызываете что-то вроде slice, сортировка будет мутировать ваше состояние напрямую ,