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

Pour moi, c'est arrivé à cause d'une accolade non ouverte dans le JSX.

<View>
        {events.map(event => {
          return (
            <Card title={event.summary}>
              <Text>Date: {event.start.dateTime}</Text>
            </Card>
          );
        })}
        } <------------ that was the culprit
</View>

Answer 2

Cela se produit généralement lorsque vous effectuez un rendu conditionnel en ligne. Vous devez supprimer les espaces blancs 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>
}

Answer 3

Dans mon cas, cette erreur est due à la présence du point-virgule ';' à la fin de la fermeture de la balise Texte. Pour tous ceux qui n'ont pas obtenu la réponse appropriée ci-dessus, essayez ceci. En supprimant le point-virgule, l'erreur a disparu.

Answer 4

D'après les autres réponses données ici, ce message d'erreur est vague et s'affiche pour diverses raisons. Je l'ai eu en écrivant des commentaires ou même des petits espaces blancs dans les vues (c'est fou, oui...).

par exemple : <View> {props.children} </View>

doit être changé en : <View>{props.children}</View>

Answer 5

J'ai rencontré le même message d'erreur dans VSCode alors que je n'avais pas de /* Commentaires */ ou d'expressions. La solution était de supprimer le formatage dans quelque chose comme textedit ou word et de copier/coller le code dans vscode.

Je ne sais pas pourquoi ni comment cela fonctionne (peut-être cela se produit-il spécifiquement dans VSCode), mais le problème de formatage est quelque chose que j'ai également connu avec SDL dans graphql...