web-dev-qa-db-fra.com

Violation invariante: les chaînes de texte doivent être rendues dans un composant <Text>

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:

 Invariant Violation: Text strings must be rendered within a <Text> Component.

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.

javascriptreact-native
7
swonder

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.

1
Yuci

Se produit également lorsque vous avez/* Comments */dans votre fonction return (). 

3
Tare Gaskin

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>
}
1
Melih Mucuk