警告：列表中的每个孩子都应该有一个唯一的“键”道具，即使有不同的键和一个键道具

Question

我正在尝试使用FlatList组件渲染网格。一切正常，除了出现与键有关的错误。我的子项已经有一个关键道具，但是错误仍然存​​在。

constructor(props) {
    super(props);
    this.state = {
        grid: [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "21", "0", "12" ]};
}


renderData = ({item}) => {
    return (
        <TouchableOpacity key={ item } style={{ width: '33.3%' }} }>
            <Text key={ item } style={styles.item}>{item}</Text>
        </TouchableOpacity>
    );
}

render() {      

    return (
        <View style={styles.container}>         
        <FlatList numColumns={3} style={ styles.list } 
          data={ this.state.grid }
          renderItem={ this.renderData }
          keyExtractor={(item, index) => {
                return item;
            }}
        />
      </View>
    );
}

但是我仍然得到：

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `LoginScreen`. 
    in View (at LoginScreen.js:40)
    in LoginScreen (created by Context.Consumer)
    in Connect(LoginScreen) (at SceneView.js:9)
    in SceneView (at src/index.tsx:72)
    in RCTView (at View.js:35)
    in View (at Transitioning.js:133)
    in Wrapped (at src/index.tsx:67)
    in AnimatedSwitchView (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:430)
    in NavigationContainer (at RootScreen.js:20)
    in RCTView (at View.js:35)
    in View (at RootScreen.js:19)
    in RootScreen (created by Context.Consumer)
    in Connect(RootScreen) (at App.js:24)
    in PersistGate (at App.js:23)
    in Provider (at App.js:15)
    in App (at renderApplication.js:40)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:39)

即使我传递唯一键，因为数组中的所有元素都不同。 有什么问题吗？