webentwicklung-frage-antwort-db.com.de

Invariante Verletzung: Textzeichenfolgen müssen innerhalb einer <Text> -Komponente gerendert werden

Ich habe ein Upgrade von RN 0.54 auf 0.57 durchgeführt, und meine App ist aufgrund der Verwendung von React Native Elements ziemlich gefallen.

Ich habe ihre Fehlerfunktionalität für TextInput-Komponenten verwendet, was im Wesentlichen die Möglichkeit bot, die Fehlermeldung zu formatieren und die Fehlermeldung festzulegen. Sehr praktisch, aber das Upgrade hat diese kaputt gemacht und ich werde jetzt mit diesem Fehler begrüßt:

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

Also habe ich diesen Code gelöscht und der Fehler verschwindet, aber ich erhalte das Problem immer noch, wenn ich diesen Code ausführte:

{ 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>
}

Wenn ich anfange, eine Texteingabe einzugeben, wird meine Fehlermeldung auf eine leere Zeichenfolge gesetzt. Wenn also ein Fehler zurückgegeben wird, wenn Sie das Feld eingeben, wird der Fehler behoben. 

Sobald aus this.state.event.cards[i].fields[j].error eine Zeichenfolge wird, erhalte ich diesen Fehler. Sie können jedoch sehen, dass ich prüfe, ob ein Fehler vorliegt, und dann den Fehler anzeigen oder zumindest versuchen.

Ein weiterer Satz Augen wäre dankbar.

7
swonder

Für mich funktioniert der folgende Code gut, solange this.state.error === undefined oder kein leerer String ist.

render() {
  return (
    <View>
      {this.state.error &&

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

Wenn der Fehlerstatus in eine leere Zeichenfolge '' geändert wird, wird die oben genannte Ausnahme angezeigt: Invariant Violation: Text strings must be rendered within a <Text> component

Der Grund dafür ist, dass bei this.state.error === '' der folgende Ausdruck als leere Zeichenfolge ausgewertet wird, d. H. ''. Dies führt zu Invariant Violation: Text strings must be rendered within a <Text> component

{this.state.error &&

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

Wenn this.state.error === undefined, wird der Ausdruck als undefined ausgewertet, was wir erwarten, und es ist in Ordnung.

1
Yuci

Ich würde !!, den ich Bang-Bang-Operator nenne, um error zu boolianisieren. Das sollte funktionieren.


{!!this.state.error && (
  <Text>
    Error message: {this.state.error}
  </Text>
)}

Wenn error ein String ist, sollte Ihr Text mit <Text /> wie die Fehlermeldung in React Native, die sich von Web unterscheidet.

9
Otani Shuzo

Tritt auch auf, wenn Sie/* Comments */in Ihrer return () - Funktion haben. 

3
Tare Gaskin

Dies geschieht normalerweise beim bedingten Inline-Rendering. Sie sollten Leerzeichen zwischen Text und Ihrer Bedingung wie folgt löschen.

{ 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
 <React.Fragment>
      {this.props.title ? (
        <React.Fragment> 
          <Text>  true </Text>
        </React.Fragment>
        ):(             
           <React.Fragment> 
          <Text>  false </Text>
          <Text>  false </Text>
        </React.Fragment>

Sie müssen mit View tag oder React.Fragment tag umbrechen und innerhalb müssen Sie auch if element mehr als eins umbrechen

0
Naved Khan