Violation d'invariant : Les chaînes de texte doivent être rendues dans un composant <Text>.

Question

J'ai fait la mise à jour de la RN 0.54 à 0.57 et mon application s'est pratiquement effondrée à cause de l'utilisation des éléments React Native.

J'ai utilisé leur fonctionnalité d'erreur sur TextInput qui permettent essentiellement d'activer des accessoires permettant de styliser le message d'erreur et de définir votre message d'erreur. Très pratique, mais la mise à jour a cassé ces composants et je suis maintenant accueilli par cette erreur :

J'ai donc supprimé ce code et l'erreur disparaît, mais le problème persiste 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 un champ de saisie de texte, le message d'erreur prend la forme d'une chaîne vide. Ainsi, si une erreur est renvoyée, le fait de taper dans le champ fera disparaître l'erreur.

Dès que this.state.event.cards[i].fields[j].error devient une chaîne de caractères, je reçois cette erreur. Cependant, vous pouvez voir que je vérifie si l'erreur existe, puis j'affiche simplement l'erreur, ou du moins j'essaie.

Une autre paire d'yeux serait reconnaissante sur ce point.

Answer 1

Utilisez ce code donné ci-dessous si la valeur initiale est une chaîne vide. Ou une vérification conditionnelle avec la valeur initiale. Ici, je vérifie conditionnellement si l'erreur n'est pas vide, puis je montre l'erreur.

{this.state.error !== '' && (
    <Text>
      {this.state.error}
    </Text>
)}

Answer 2

Pour moi, l'erreur était due au fait que j'ai initialisé l'objet state comme une chaîne vide.

const [category, setCategory] = useState("")

Si l'état doit être un objet, il doit être défini comme nul au départ.

const [category, setCategory] = useState(null)

Ils ont résolu le problème.

Answer 3

 <React.Fragment>
      {this.props.title ? (
        <React.Fragment> 
          <Text>  true </Text>
        </React.Fragment>
        ):(             
           <React.Fragment> 
          <Text>  false </Text>
          <Text>  false </Text>
        </React.Fragment>

Vous devez emballer avec Voir ou React.Fragment et à l'intérieur, vous devez également envelopper l'élément if plusieurs fois.

Answer 4

Essayez ceci :

<>
    <View>
    {this.state.error &&
      <Text>
        Error message: {this.state.error}
    </Text>
   </View>
</>

Answer 5

{this.state.password.length > 0 && <Text>}

Cela produira la même erreur, car il retourne undefined. Nous pouvons le rendre comme ceci -

{this.state.password.length > ? <Text> : null}