Question

点击show-comments后，我将在评论部分中构建照片馈送应用程序project-repo-here，它会在设备上显示评论页面，但是在终端中，它会因为错误而中断，

在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显示注释数组并给出

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

您需要像这样返回密钥

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

Answer 2

我的列表中不需要任何搜索功能，因此此时 keyExtractor 对我来说并不重要，您只需添加以下行即可直接解决此问题

<script type="text/javascript">
  function showTab() {
   $('#Tab2').tab('show');
  }
</script>

Answer 3

就我而言：

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

Answer 4

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

请记住在使用{}括号时使用return，否则将无法正常工作。

Answer 5

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

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


                                    <Item/>

                                </View>
                            </View>

React-Native FlatList-警告：即使给定key = {index}，数组或迭代器中的每个子代也应具有唯一的“ key”属性

5 个答案: