为什么 num 没有显示正确的值？

Question

我正在学习 React-Native 并将构建游戏作为第一个应用程序。我正在构建一个基于 JSON 获取结果的按钮平面列表。按钮的标题应该是一个数字，最好是 1,...n 到 n 个结果。我的测试数据集是5.

我试过不递增 num，我看到的所有按钮都是“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>

为什么 num 没有显示正确的值？

Why is num not showing the correct value?

iterator

react-native

react-native-flatlist