Почему num не показывает правильное значение?

Question

Я изучаю React-Native и создаю игру как первое приложение.Я строю плоский список кнопок на основе результатов JSON.Название кнопки должно быть числом, в идеале должно быть от 1, ... n до n результатов.Мой набор тестовых данных равен 5.

Я пытался не увеличивать число, где я вижу только «0» для всех кнопок.Я пробовал num--, где я вижу -5, -6, -7, -8 и т. Д.

        <View style={styles.board}>
          <FlatList   
            data={this.state.data} 
            keyExtractor={(x, i) => i.toString()} 

            // renderItem is a FlatList prop
            renderItem={({ item }) =>
            <View style={styles.answers}>

              <Button               
                title = {`${num++}`} // POINT OF CONTENTION
                onPress={() => {
                  Alert.alert(
                    'Answer', // dialog title
                    `${item.name.first} ${item.name.last}`, // dialog message
                    [
                      {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                      {text: 'OK', onPress: () => console.log('OK Pressed')},
                    ],
                    //{ cancelable: false } // disables the option to cancel
                  )
                }}                
              />
              </View>
              }                       
          /> 
        </View>

Ожидаемое поведение: появляются цифры 1,2,3,4,5.Фактическое поведение: 5, 6, 7, 8, 9 появляются.

Answer 1

Пожалуйста, попробуйте следующее,

<View style={styles.board}>
          <FlatList   
            data={this.state.data} 
            keyExtractor={(x, i) => i.toString()} 

            // renderItem is a FlatList prop
            renderItem={({ item, index }) =>
            <View style={styles.answers}>

              <Button               
                title = {index+1} // POINT OF CONTENTION
                onPress={() => {
                  Alert.alert(
                    'Answer', // dialog title
                    `${item.name.first} ${item.name.last}`, // dialog message
                    [
                      {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                      {text: 'OK', onPress: () => console.log('OK Pressed')},
                    ],
                    //{ cancelable: false } // disables the option to cancel
                  )
                }}                
              />
              </View>
              }                       
          /> 
        </View>