Erreur de rendu React Native lors de la tentative de rendu de plusieurs composants
P粉043566314
2023-09-05 18:57:09
<p>Je souhaite restituer plusieurs copies du même composant personnalisé créé après que l'utilisateur a appuyé sur le bouton "Ajouter". Mon code est le suivant : </p>
<pre class="brush:php;toolbar:false;">importer "react-native-get-random-values";
importer { StyleSheet, TextInput, View, Text, TouchableHighlight, Button } depuis 'react-native' ;
importer React, {useState} depuis 'react' ;
importer { v4 comme uuidv4 } depuis 'uuid' ;
importer un ascenseur depuis './Lift'
exporter la fonction par défaut Lifts() {
// const [cards, setCards] = useState([{ id: uuidv4() }])
// const onPress = () => setCards([...cartes, [{ id : uuidv4() }]])
const [cartes, setCards] = useState([uuidv4()])
const onPress = () => setCards([...cartes, uuidv4()])
const liftCards = cartes.map((id) => {
retour (
<Afficher la clé={id}>
<Ascenseur />
</Afficher>
)
})
retour (
<Afficher>
<TouchableHighlight onPress={onPress} underlayColor={'#DDDDDD'} style={styles.touchable}>
<View style={styles.button}>
<Texte>
Ajouter un ascenseur
</Texte>
</Afficher>
</TouchableHighlight>
{/* <Text style={{ alignSelf : 'center', top : 100 }}>
{cartes}
</Texte> */}
{
cartes.map((données, identifiant) => {
retour (
<Texte> {id} </Texte>
)
})
}
</Afficher>
)
}
const styles = StyleSheet.create({
bouton: {
alignItems : 'centre',
largeur de bordure : 2,
borderColor : 'noir',
rayon de frontière : 10,
rembourrage : 10,
},
touchable : {
margeHorizontale : 10,
Top 10
}
})</pré>
Le <p> dans l'extrait ci-dessus est un composant personnalisé que je souhaite afficher à l'écran. Le problème que j'ai est qu'après avoir cliqué plusieurs fois sur "Ajouter Boost", je reçois un message d'erreur disant "undéfini n'est pas une fonction".我得到的错误:</p>
<pre class="brush:php;toolbar:false;">ERROR TypeError : undefined n'est pas une fonction
Cette erreur se situe à l'adresse :
dans Ascenseurs (créé par SceneView)
dans StaticContainer
dans EnsureSingleNavigator (créé par SceneView)
dans SceneView (créé par SceneView)
dans RCTView (créé par View)
dans View (créé par DebugContainer)
dans DebugContainer (créé par MaybeNestedStack)
dans MaybeNestedStack (créé par SceneView)
dans RCTView (créé par View)
dans View (créé par SceneView)
dans RNSScreen (créé par AnimatedComponent)
dans Composant Animé
dans AnimatedComponentWrapper (créé par InnerScreen)
dans Suspender (créé par Freeze)
en suspens (créé par Freeze)
dans Freeze (créé par DelayedFreeze)
dans DelayedFreeze (créé par InnerScreen)
dans InnerScreen (créé par Screen)
dans Screen (créé par SceneView)
dans SceneView (créé par NativeStackViewInner)
dans Suspender (créé par Freeze)
en suspens (créé par Freeze)
dans Freeze (créé par DelayedFreeze)
dans DelayedFreeze (créé par ScreenStack)
dans RNSScreenStack (créé par ScreenStack)
dans ScreenStack (créé par NativeStackViewInner)
dans NativeStackViewInner (créé par NativeStackView)
dans RNCSafeAreaProvider (créé par SafeAreaProvider)
dans SafeAreaProvider (créé par SafeAreaInsetsContext)
dans SafeAreaProviderCompat (créé par NativeStackView)
dans NativeStackView (créé par NativeStackNavigator)
dans PreventRemoveProvider (créé par NavigationContent)
dans le contenu de navigation
dans Inconnu (créé par NativeStackNavigator)
dans NativeStackNavigator (créé par App)
dans EnsureSingleNavigator
dans BaseNavigationContainer
dans le fournisseur de thème
dans NavigationContainerInner (créé par App)
dans l'application (créée par withDevTools (App))
dans withDevTools (App)
dans RCTView (créé par View)
dans View (créé par AppContainer)
dans RCTView (créé par View)
dans View (créé par AppContainer)
dans AppContainer
dans main(RootComponent), moteur js : hermes</pre>
<p>我相当有信心问题出在我对 <code>uuidv4()</code> <code>卡片</code>的长度时仅使用 1, 2, 3...作为 id 数字而不是 <code>uuidv4() </code> <code>uuidv4()</code> 时得到相同的结果,并且自定义 <code><Lift /></code> 卡的数量与 <code>cards</code></p> 的长度相匹配>
<p>
移动设备上的错误 移动设备上的错误继续</p>
Je n'arrivais pas à comprendre quel était le problème, mais grâce à quelques discussions dans les commentaires, j'ai eu la révélation que quelque chose n'était peut-être pas correctement lié à la dépendance uuid. J'ai donc utilisé un package uuid différent et cela semble faire l'affaire... pour l'instant