Je suis en train de créer l'application de flux de photos, project-repo- ici , dans la section commentaires après avoir cliqué sur show-comments, il affiche la page de commentaires sur un appareil, mais dans un terminal, il se brise avec une erreur car,
l'erreur est dans le fichier comments.js. p >
<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>
)}
/>
J'affiche un tableau de commentaires en utilisant flatList et j'ai donné
keyExtractor = {(item, index) => {
ID de l'article;
}}
aussi, j'ai essayé de donner key = {index}, mais la même erreur. J'ai donné une clé unique comme index, mais une erreur se produit,
Le composant flatList est
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
La structure de la base de feu est la suivante
4 Réponses :
Vous devez renvoyer la clé comme ceci
keyExtractor={(item, index) => {
return item.id;
}}
merci Rishabh, cela a fonctionné, ce mot-clé return , sinon c'est le même. Je suis un tutoriel, mais le tuteur ne renvoie pas item.id, il donne simplement item.id comme je l'ai fait, mais comment n'a-t-il pas eu d'erreur, sans renvoyer la clé?
alors il doit utiliser this () crochets au lieu de {} comme ce keyExtractor = {(item, index) => (return item.id;)}
non, voici une capture d'écran. imgur.com/a/ZrAdWWy , également, même après avoir utilisé index comme clé < / code> au lieu de item.id
si vous voyez de près, il n'utilise aucun type de parenthèse, il le renvoie simplement par keyExtractor = {(value, index) => index.toString ()} si vous n'utilisez pas d'accolades renverra simplement le résultat
vérifié et a voté pour votre réponse. ok Rishabh, je l'ai. "Si nous utilisons {} , nous devons retourner manuellement la clé, sinon elle retourne automatiquement, ai-je raison? Je souhaite le savoir avant deux jours pendant que je trouvais l'erreur dans tous les modules .
Oui exactement c'est comme ça que ça se passe
J'utilise pour suivre {} pour l'indentation et voir le code sans ambiguïté, mais cela rend un mot-clé supplémentaire comme "return", comparé au retour en ligne func n'a pas besoin de "return". merci @Rishabh.
Dans mon cas:
keyExtractor={(item, index) => item.id.toString() }
return ( <FlatList
data={options}
keyExtractor={(item, index) => {
return index.toString();
}}
renderItem={_renderItem2}
/>);
remember to use return when using the {} bracket, otherwise it will not work.
Merci cela a fonctionné pour moi
keyExtractor={(item, index) => {
return index.toString();
}}
renderItem={(item, index) => (
<View key={index}>
<View style={{ margin: 6 }}>
<Item/>
</View>
</View>
"keyExtractor = {(item, index) => {item.id;}}" vous ne retournez pas la clé. plz le renvoyer "keyExtractor = {(item, index) => {return item.id;}}"