0
485
VistasInfracción invariable: las cadenas de texto deben representarse dentro de un componente <Text>
Actualicé de RN 0.54 a 0.57 y mi aplicación prácticamente se cayó debido al uso de React Native Elements.
Aproveché su funcionalidad de error en los componentes TextInput que básicamente habilitaron accesorios para que pudiera diseñar el mensaje de error y configurar su mensaje de error. Muy conveniente, sin embargo, la actualización los rompió y ahora recibo este error:
Así que eliminé ese código y el error desaparece, sin embargo, sigo recibiendo el problema cuando ejecuto este código:
{ 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> }Cuando empiezo a escribir en una entrada de texto, establece mi mensaje de error en una cadena vacía, por lo que si se devuelve un error, escribir en el campo hará que el error desaparezca.
Tan pronto como this.state.event.cards[i].fields[j].error se convierte en una cadena, me devuelve este error. Sin embargo, puede ver que verifico si existe un error, luego solo muestro el error, o intento al menos.
Otro par de ojos estarían agradecidos con este.
3 Respuestas
Responde la pregunta0
Me disparé en el pie demasiadas veces por esto, así que lo dejo aquí para que la próxima persona no lo haga...
cada vez que ves
Invariant Violation: Text strings must be rendered within a <Text> component¿El 99 % de los casos se debe al uso de representación condicional con solo && en lugar de ternario? : declaraciones. ¿Por qué? Porque cuando su condición se resuelve en undefined , no hay componentes allí, a diferencia de nulo o una matriz vacía que habría mostrado de manera segura un espacio vacío y le habría salvado la vida de la pantalla roja del infierno.
Cambie TODAS SUS RENDICIONES CONDICIONALES LÓGICAS en representaciones ternarias.
es decir:
NO HAGAS
widgetNumber === 10 && <MyComponent />HACER HACER
widgetNumber === 10 ? <MyComponent /> : nullCada vez. Por favor. Por el amor de reaccionar nativo.
0
También ocurre cuando tiene /* Comentarios */ en su función return().
0
Para mí, el siguiente código funciona bien, siempre que this.state.error === undefined o no sea una cadena vacía.
render() { return ( <View> {this.state.error && <Text> Error message: {this.state.error} </Text> } </View> ); } Si el estado de error se cambia a cadena vacía '', tendrá la excepción mencionada anteriormente: Invariant Violation: Text strings must be rendered within a <Text> component
La razón de esto es que cuando this.state.error === '' , la siguiente expresión se evaluará como una cadena vacía, es decir, '', y esto provocará una Invariant Violation: Text strings must be rendered within a <Text> component
{this.state.error && <Text> Error message: {this.state.error} </Text> } Cuando this.state.error === undefined , la expresión se evaluará como undefined , que es lo que esperamos, y está bien.