React-Native FlatList- 警告：数组或迭代器中的每个 child 都应该有一个唯一的 "key" 属性，即使在给出 key={index} 之后

Question

我正在构建 photo-feed 应用程序，project-repo-here，在点击 show-comments 后的评论部分，它在设备上显示评论页面，但在终端中，它中断了错误为，

错误在 comments.js 文件中。

Warning: Each child in an array or iterator should have a unique "key" prop.%s%s See documentationOfREact/react-warning-keys for more information.%s, 

Check the render method of `VirtualizedList`., , 
    in CellRenderer (at VirtualizedList.js:687)
    in VirtualizedList (at FlatList.js:662)
    in FlatList (at comments.js:212)
    in RCTView (at View.js:44)
    in comments (created by SceneView)
    in SceneView (at StackViewLayout.js:795)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.js:69)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:57)
    in Card (at createPointerEventsContainer.js:27)
    in Container (at StackViewLayout.js:860)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.js:311)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.js:307)
    in Handler (at StackViewLayout.js:300)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:79)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.js:22)
    in StackView (created by Navigator)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
    in NavigationContainer (at App.js:70)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)
- node_modules/react/cjs/react.development.js:217:39 in warningWithoutStack
- node_modules/react/cjs/react.development.js:617:32 in warning
- node_modules/react/cjs/react.development.js:1429:14 in validateExplicitKey
- node_modules/react/cjs/react.development.js:1451:28 in validateChildKeys
- node_modules/react/cjs/react.development.js:1619:22 in cloneElementWithValidation
- node_modules/react-native/Libraries/Lists/VirtualizedList.js:947:6 in render
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:10563:21 in finishClassComponent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14091:21 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14129:41 in workLoop
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14226:15 in renderRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15193:17 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15090:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15047:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14925:19 in requestWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14711:16 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7700:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:364:31 in setState
* app/screens/comments.js:66:22 in <unknown>
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in <unknown>
- ... 8 more stack frames from framework internals

我正在使用 flatList 显示 comments-array 并给出了

keyExtractor={(item, index) => { item.id; }}

另外，我尝试给 key={index}，但同样的错误。我给了唯一键作为索引，但发生错误，

flatList 组件是

   <FlatList
        refreshing={this.state.refresh}
        data={this.state.comments_list}
        keyExtractor={(item, index) => {
          item.id;
        }}
        style={{ flex: 1, backgroundColor: "#eee" }}
        renderItem={({ item, index }) => (
          <View
            key={item.id}
            style={{
              width: "100%",
              overflow: "hidden",
              marginBottom: 5,
              justifyContent: "space-between",
              borderColor: "grey"
            }}
          >
            <View style={{ padding: 5 }}>
              <Text>time: {item.timestamp}</Text>
              <TouchableOpacity>
                <Text>{item.author}</Text>
              </TouchableOpacity>
            </View>

            <View>
              <Text>{item.comment}</Text>
            </View>
          </View>
        )}
      />

firebase结构是这样的

Answer 1

您需要 return 这样的密钥

keyExtractor={(item, index) => {
          return item.id;
        }}

Answer 2

就我而言：

keyExtractor={(item, index) => item.id.toString() }

Answer 3

return ( <FlatList
        data={options}
        keyExtractor={(item, index) => {
         return  index.toString();
        }}
        renderItem={_renderItem2}
/>);

记得用{}括号的时候要用return，不然不行

Answer 4

 keyExtractor={(item, index) => {
                            return index.toString();
                        }}
  renderItem={(item, index) => (

                            <View key={index}>
                                <View style={{ margin: 6 }}>


                                    <Item/>

                                </View>
                            </View>

Answer 5

我的列表中不需要任何搜索功能，所以 keyExtractor 目前对我来说并不重要；但是，您可以通过添加以下行直接解决此问题。

<FlatList
  keyExtractor={(item, index) => index.toString()} //Add this line
  style={{...}}
  data={...}
  renderItem={info => {...}}/>

Answer 6

keyExtractor 即使由于间距也显示警告消息。最好的办法永远是return的关键。例如

keyExtractor={(item, index) => {
                return(item.id);
             }}

否则你可以消除间距

keyExtractor={(item, index) =>item.id}

React-Native FlatList- 警告：数组或迭代器中的每个 child 都应该有一个唯一的 "key" 属性，即使在给出 key={index} 之后

React-Native FlatList- Warning: Each child in an array or iterator should have a unique "key" prop, even after giving key={index}

reactjs

react-native

react-native-flatlist