Violación invariante: las cadenas de texto se deben representar dentro de un componente

He actualizado de RN 0.54 a 0.57 y mi aplicación se ha caído debido al uso de React Native Elements.

TextInput su funcionalidad de error en los componentes TextInput , que básicamente permitían que el mensaje de error se pudiera personalizar y configurara su mensaje de error. Muy conveniente, sin embargo, la actualización los ha roto y ahora me aparece este error:

<img src="http://sofes.miximages.com/javascript/KXWS9.jpg" alt="Violación invariante: las cadenas de texto se deben representar dentro de un componente .”>

Así que he eliminado ese código y el error desaparece, sin embargo, aún estoy recibiendo el problema cuando ejecuto este código:

 { this.state.event.cards[i].fields[j].error &&  {this.state.event.cards[i].fields[j].error}  } 

Cuando comienzo a escribir en una entrada de texto, configura mi mensaje de error en una cadena vacía, por lo que si se devuelve un error, al escribir en el campo el error desaparecerá.

Tan pronto como this.state.event.cards[i].fields[j].error convierte en una cadena, me devuelve este error. Sin embargo, puede ver que verifico si existe un error, luego solo muestro el error o bash al menos.

Otro par de ojos estaría agradecido en este caso.

Para mí, el siguiente código funciona bien, siempre que this.state.error === undefined o no sea una cadena vacía.

 render() { return (  {this.state.error &&  Error message: {this.state.error}  }  ); } 

Si el estado de error se cambia a una cadena vacía ”, tendrá la excepción mencionada anteriormente: Invariant Violation: Text strings must be rendered within a 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 component

 {this.state.error &&  Error message: {this.state.error}  } 

Cuando this.state.error === undefined , la expresión se evaluará como undefined , que es lo que esperamos, y está bien.

También ocurre cuando tiene / * Comentarios * / en su función return ().

Esto suele suceder cuando haces renderización condicional en línea. Debe eliminar los espacios en blanco entre el Text y su condición como se muestra a continuación.

 { this.state.event.cards[i].fields[j].error &&  {this.state.event.cards[i].fields[j].error}  } 

Yo usaria !! bang bang operador, que funciona.

 {!!this.state.error && (  Error message: {this.state.error}  )} 

Simplemente elimine los comentarios del código, entonces funcionará bien. ¡No conozco ninguna otra alternativa por cierto! 🙂