J'ai mis à niveau de RN 0.54 à 0.57 et mon application est pratiquement tombée en panne en raison de l'utilisation de React Native Elements.
J'ai utilisé leurs fonctionnalités d'erreur sur les composants TextInput
, ce qui a fondamentalement permis aux accessoires que vous pouvez attribuer un style au message d'erreur et définir votre message d'erreur. Très pratique, cependant la mise à jour les a cassées et je suis maintenant accueilli par cette erreur:
Donc, j'ai supprimé ce code et l'erreur disparaît, mais je reçois toujours le problème lorsque j'exécute ce code:
{ this.state.event.cards[i].fields[j].error &&
<Text style={{ color: '#e74c3c', fontSize: 14, paddingLeft: 5 }}>
{this.state.event.cards[i].fields[j].error}
</Text>
}
Lorsque je commence à taper dans une entrée de texte, mon message d'erreur est défini sur une chaîne vide. Ainsi, si une erreur est renvoyée, la saisie dans le champ fera disparaître l'erreur.
Dès que this.state.event.cards[i].fields[j].error
devient une chaîne, cette erreur est renvoyée. Cependant, vous pouvez voir que je vérifie si une erreur existe, alors je ne fais que montrer l'erreur, ou au moins essayer.
Une autre paire d'yeux serait reconnaissant pour celui-ci.
Pour moi, le code suivant fonctionne bien, tant que this.state.error === undefined
ou ce n'est pas une chaîne vide.
render() {
return (
<View>
{this.state.error &&
<Text>
Error message: {this.state.error}
</Text>
}
</View>
);
}
Si l'état d'erreur est changé en chaîne vide '', vous aurez l'exception susmentionnée: Invariant Violation: Text strings must be rendered within a <Text> component
La raison en est que, lorsque this.state.error === ''
, l'expression suivante sera évaluée en tant que chaîne vide, c'est-à-dire, '' et que ceci provoquera Invariant Violation: Text strings must be rendered within a <Text> component
{this.state.error &&
<Text>
Error message: {this.state.error}
</Text>
}
Lorsque this.state.error === undefined
, l'expression sera évaluée en tant que undefined
, ce à quoi nous nous attendons, et c'est bien.
Se produit également lorsque vous avez/* Comments */dans votre fonction return ().
Cela se produit généralement lorsque vous effectuez un rendu conditionnel intégré. Vous devez supprimer les espaces entre Text
et votre condition comme ci-dessous.
{ this.state.event.cards[i].fields[j].error && <Text style={{ color: '#e74c3c', fontSize: 14, paddingLeft: 5 }}>
{this.state.event.cards[i].fields[j].error}
</Text>
}