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不能显示正确的值？

1 个答案: