Инвариантное нарушение: текстовые строки должны отображаться внутри <text> составная часть

Я обновил RN 0,54 до 0,57, и мое приложение в значительной степени упало из-за использования React Native Elements.

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

Таким образом, я удалил этот код, и ошибка исчезла, однако я все еще получаю проблему, когда я запускаю этот код:

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

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

Как только this.state.event.cards[i].fields[j].error становится строкой, я получаю эту ошибку. Однако вы можете видеть, что я проверяю, существует ли ошибка, тогда я просто отображаю ошибку или пытаюсь, по крайней мере.

Еще один глазок будет благодарен за это.

Ответ 1

Для меня следующий код работает нормально, если 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 === '', следующее выражение будет оцениваться как пустая строка, т. 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, чего мы и ожидаем, и это нормально.

Ответ 2

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

Ответ 3

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


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

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

Ответ 4

Обычно это происходит, когда вы выполняете встроенный условный рендеринг. Вы должны удалить пробел между 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>
}

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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