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

Обычно это происходит, когда вы выполняете встроенный условный рендеринг. Вы должны удалить пробелы между Text и вашим состоянием, как показано ниже.

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

Также происходит, когда у вас есть / * Комментарии * / в вашей функции return ().

Для меня следующий код работает нормально, если this.state.error === undefined или это не пустая строка.

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

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

Если состояние ошибки изменится на пустую строку '', у вас будет вышеупомянутое исключение: Invariant Violation: Text strings must be rendered within a <Text> component

Причина этого в том, что при this.state.error === '' следующее выражение будет оцениваться как пустая строка, т.е. '', и это приведет к тому, что Invariant Violation: Text strings must be rendered within a <Text> component

{this.state.error &&

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

Когда this.state.error === undefined, выражение будет оценено как undefined, чего мы и ожидали, и это нормально.

Просто удалите комментарии из кода, тогда все будет нормально. Кстати, другой альтернативы я не знаю! :)

Я бы использовал !!, который я называю оператором bang bang, чтобы булинизировать error. Это должно сработать.

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

Если error является строкой, ваш текст должен быть заключен в <Text />, как говорится в сообщении об ошибке в React Native, который отличается от веб-интерфейса.

 <React.Fragment>
      {this.props.title ? (
        <React.Fragment> 
          <Text>  true </Text>
        </React.Fragment>
        ):(             
           <React.Fragment> 
          <Text>  false </Text>
          <Text>  false </Text>
        </React.Fragment>

Вам нужно обернуть тегом Вид или тегом React.Fragment, а внутри вам также нужно обернуть, если элемент более одного

попробуй это :

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

Я столкнулся с тем же сообщением об ошибке в VSCode, но у меня не было / * комментариев * / или каких-либо выражений. Решением было удалить форматирование в чем-то вроде textedit или word и скопировать + вставить код обратно в vscode.

Я не знаю, почему и как это работает (возможно, это происходит конкретно в VSCode), но проблема форматирования - это то, с чем я также столкнулся с SDL в graphql ...

Я слишком много раз стрелял себе в ногу из-за этого, поэтому оставляю это здесь, чтобы следующий человек не ...

Всякий раз, когда вы видите

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

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

Измените ВСЕ ВАШИ ЛОГИЧЕСКИЕ УСЛОВНЫЕ РЕНДЕРЫ на троичные представления.

то есть:

НЕ ДЕЛАЙТЕ

widgetNumber === 10 && <MyComponent />

ДЕЛАТЬ

widgetNumber === 10 ? <MyComponent /> : null

Каждый раз. Пожалуйста. Из любви к родному реагирую.

В моем случае эта ошибка возникла из-за наличия точки с запятой ';' в конце закрытия текстового тега. Для всех тех, кто не получил подходящего ответа выше, попробуйте это. Убрав точку с запятой, ошибка исчезла.

Для меня это произошло из-за неоткрытой фигурной скобки внутри JSX.

<View>
        {events.map(event => {
          return (
            <Card title = {event.summary}>
              <Text>Date: {event.start.dateTime}</Text>
            </Card>
          );
        })}
        } <------------ that was the culprit
</View>

this.state.recording ?(<Text>{this.secondsToMMSS(this.state.seconds)}</Text>) :                                     (null)

текстовая строка должна отображаться в компоненте

{this.state.password.length > 0 && <Text>}

Это вызовет ту же ошибку, потому что возвращает undefined. Мы можем сделать это так -

{this.state.password.length > ? <Text> : null}

In my case some part of the code was out side the text component for example:
<RadioForm style = {styles.radiobutton} 
                      radio_props = {hobbies}
                      initial = {1}
                      onPress = {(value) => {ToastAndroid.show(value.toString(), ToastAndroid.SHORT)}}
                      buttonSize = {4.5}
                      buttonOuterSize = {19}
                      selectedButtonColor = {'green'}
                      selectedLabelColor = {'green'}
                      labelStyle = {{ fontSize: 14, }}
                      disabled = {false}
                      formHorizontal = {true}
             />
<RadioForm

эта строка выше <RadioForm остается незакрытой, что является причиной

Прочитав другие ответы здесь, это сообщение об ошибке расплывчато и отображается по разным причинам. У меня это получалось при написании комментариев или даже при небольших пробелах в представлениях (безумно, да ...)

например: <View> {props.children} </View>

необходимо изменить на: <View>{props.children}</View>

У меня была та же проблема, и ошибка заключалась в добавлении пробела между дочерними элементами и компонентом, например {children}

Примечание: удалите все места рядом с {children}

 <Provider value = {something}>{children}</BlogContext.Provider>

Это произошло со мной, потому что я случайно использовал имя функции в нижнем регистре:

export const p = (props) => {
  return (
    <Text style = {[styles.p]}>{props.children}</Text>
  );
};

Должно быть:

export const P = (props) => {
  return (
    <Text style = {[styles.p]}>{props.children}</Text>
  );
};

Обратите внимание, что во втором p пишется с заглавной буквы. Это необходимо для того, чтобы компоненты определялись как компоненты React Native.

У меня такая же проблема, В моем случае у меня был компонент <AppText>, который показывает под капотом простой форматированный <Text>.

Первый код был похож на

<AppText> </AppText>

пока я пробовал разные вещи, я просто написал его с самозакрывающимся синтаксисом

<AppText />

затем проблема была внезапно решена.

Я думаю, это был особый и невидимый символ, который я по ошибке написал между тегами. или этот символ поступал из VSCode с помощью функции автозаполнения или фрагментов, потому что я не мог повторить ошибку, поставив пробел.

В моем случае это произошло из-за того, что комментарии в функции рендеринга

// Some comment here

Решения:

• Удалить комментарий
• или сделать вот так {/* Same comment here*/}

Иногда Prettier или программа форматирования кода добавляют это в ваш JSX при сохранении.

<View>
{' '}
</View>

Удалите это, и все будет в порядке.

Используйте этот код, приведенный ниже, если начальное значение - пустая строка. Или условный чек с начальным значением. Здесь я условно проверяю, когда ошибка не пустая, а затем показываю ошибку.

{this.state.error !== '' && (
    <Text>
      {this.state.error}
    </Text>
)}

Была та же проблема, и комментарий @serdasenay заставил меня понять основную причину.

Использование синтаксиса {condition && <Element/>} само по себе не является неправильным, но важно знать, что происходит.

Корень проблемы - короткое замыкание логики. В выражениях логики Javascript оценивается, а && оценивает последнее эквивалентное значение true. Но не в true, а в фактическое значение перед преобразованием в логическое. Это то, с чего фактически можно начать этот синтаксис. Поскольку <Element/> всегда является true, если condition является true, выражение оценивается как <Element/>.

Проблема возникает при условии false. Когда выражение && терпит неудачу, оно возвращает первое значение, то есть condition. Но до того, как он будет преобразован в логическое значение. Итак, если вы используете прямую строку или число как condition, и оно оценивается как false, логическое выражение будет оценивать эту строку или число. Пример: {array.length && <List/>} с пустым массивом оценивается как {0}, что вызывает ошибку.

Решение состоит в том, чтобы убедиться, что condition является реальным логическим значением (и это работает, потому что React может иметь дело с логическими значениями рендеринга - он думает, что React просто игнорирует их). Так что сделайте следующее: {array.length > 0 && <List/>}

Эта ошибка возникает, когда у вас есть /*Commented code*/ в вашей функции return().

Потратил значительную часть дня на выполнение совершенно несвязанных задач, чтобы попытаться исправить это.

Есть оператор !! который преобразует строковый тип в логический и делает его ложным, если переменная является пустой строкой:

{!!error &&
  <Text>
    Error message: {error}
</Text>}

Для меня это было из-за неправильного закрытия > в TouchableOpacity Реагировать на родную сенсорную непрозрачность.

Неверный код:

<TouchableOpacity>
        onPress = {() => this.setState({ showOverLay: true })}
          <Image
            source = {cardImage}
            resizeMode = "contain"
            style = {[
              styles.cardImage, cardImageStyle
            ]}
          />
</TouchableOpacity>

Хороший код:

  <TouchableOpacity
        onPress = {() => this.setState({ showOverLay: true })}>
          <Image
            source = {cardImage}
            resizeMode = "contain"
            style = {[
              styles.cardImage, cardImageStyle
            ]}
          />
</TouchableOpacity>

В моем случае мне пришлось удалить пробел между тегом View и тегом Text. из

<View>  <Text style = {{ color: "white"}}>Start</Text> </View>

к

<View><Text style = {{ color: "white"}}>Start</Text></View>

хорошо, так что если вы зашли так далеко, это потому, что у вас, вероятно, такие же проблемы, как, например, у меня:

вернуть {columns}

а также:

вернуть {строки}

вы видите пробел между "> {" да, в этом вся проблема, попробуйте их удалить.

Этот код ниже также проверяет пустую строку и истинное значение.

  return(
    <View>
    {!!this.state.error && <Text>{this.state.errorMessage}</Text>}
    </View>
  );

Для меня ошибка заключалась в том, что я инициализировал объект состояния как пустую строку.

const [category, setCategory] = useState("")

Если состояние будет объектом, то вначале для него должно быть установлено значение null.

const [category, setCategory] = useState(null)

Решил проблему.

Удалить пространство между компонентами снаружи

<Text></Text>

Бывший. Не использовать

<Button> <Text>hi</Text></Button> 

Но используйте

<Button><Text>hi</Text></Button>