Как исправить, ошибка «Нарушение инварианта: текстовые строки должны отображаться в компоненте <Text>»

Вы не можете передать функцию взамен, она интерпретирует ее как строковое значение, а View не может отображать текст.

Вы можете использовать методы жизненного цикла для выполнения этой функции.

Обратите внимание, что ваше свойство this.a в вашем компоненте try1 представляет собой массив: this.a = [];, и вы пытаетесь отобразить это свойство непосредственно в своем методе render(), например: <Text>{this.a}</Text>. Однако это вызывает проблемы, поскольку:

Метод render()не поддерживает рендеринг возвращаемого типа только массива напрямую. Когда вы вызываете метод React компонента render(), он должен возвращать одно из следующих значений:

1. Реагировать на элементы. Обычно создается через JSX. Например, <div /> и <MyComponent /> — это элементы React, которые предписывают React отображать узел DOM или другой пользовательский компонент соответственно.
2. Массивы и фрагменты. Позвольте вам вернуть несколько элементов из рендера. См. документацию по фрагментам для более подробной информации.
3. Порталы. Позволяет отображать дочерние элементы в другое поддерево DOM. См. документацию по порталам для более подробной информации.
4. Строка и цифры. Они отображаются как текстовые узлы в DOM. Булевы значения или ноль. Ничего не визуализировать. (В основном существует для поддержки шаблона return test && <Child />, где test является логическим.)

Для получения дополнительной информации ознакомьтесь с render()спец..

В этом коде также есть другая ошибка:

1. Пользовательские компоненты реакции должны быть названы в верхнем регистре., иначе JSX будет думать, что это тег HTML. Переименуйте try1 в Try1.
2. Переместите вызов функции конфигурации перед оператором return, так как оператор возврата ожидает фактический вид, который будет возвращен.

Имея это в виду, попробуйте пройтись по this.a и дать каждому элементу в массиве элемент Text для отображения, что-то вроде следующего:

render() {
    this.config();
    let aEles = this.a;
    return(
        <View style = {styles.container}>
            aEles.map(edge => (
               <Text>{edge}</Text>
            ));
        </View>

    )  
}

Надеюсь, это поможет!

Вы пытаетесь отобразить массив внутри компонента <Text></Text>. Вы можете отображать только чистую строку.

Если вы хотите отображать динамический текст внутри компонента, используйте «состояние». Это может помочь вам:

constructor(props){
 super(props);
 ...
 ...
 this.state = {
  a = []
 }
}

А потом:

render() {

 this.config();

 return(
    <View style = {styles.container}>
        this.state.a && this.state.a.map(data=> (
           <Text>{data}</Text>
        ));
    </View>

 )  
}

this.config() — это функция, которую вы пишете в jsx. если вы хотите вызвать функцию конфигурации, вы должны писать вне jsx. this.config() в свою очередь рассматривается как строка. каждая строка должна быть внутри текстового тега. так что вы видите эту ошибку.

render(){
  this.config()
  return (
    <View style = {styles.container}>
      <Text>{this.a}</Text>
    </View>
  );
}

Если вы используете некоторые условные операторы, используйте тернарные операторы. Если вы используете &&, а затем передаете компонент после этого, это приведет к ошибке. Смотрите ниже, какой у меня был код. Вот Подача — мой компонент:

Before

{userId && <Feed posts = {posts}/> } // this will give you an error

After

{userId ? <Feed posts = {posts}/> : null} // this works fine

Так что, возможно, у вас есть такая проблема с вашим кодом. Посмотрите сейчас.