不变违规:必须在 <Text> 中呈现文本字符串.成分 [英] Invariant Violation: Text strings must be rendered within a &lt;Text&gt; component

问题描述

我已从 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}</文本>}

当我开始输入文本时，它会将我的错误消息设置为空字符串，因此如果返回错误，在该字段中输入将使错误消失.

一旦 this.state.event.cards[i].fields[j].error 变成字符串，我就会返回这个错误.但是你可以看到我检查是否存在错误，然后我只是显示错误，或者至少尝试.

另一双眼睛会感激这个.

解决方案

我已经为此多次中伤自己的脚，所以我把这个留在这里，让下一个人不要……

每当你看到

Invariant Violation:文本字符串必须在  中呈现.成分

99% 的情况是由仅使用 && 的条件渲染引起的而不是三元?: 声明.为什么?因为当您的条件解析为 undefined 时，那里没有组件，而不是 null 或空数组，它们可以安全地显示一个空白空间并从地狱的红屏中拯救您的生命.>

将您所有的逻辑条件渲染更改为三元渲染.

即:

不要做

widgetNumber === 10 &&<我的组件/>

做 做

widgetNumber === 10 ?<我的组件/>: 空值

每一次.请.对于 React Native 的热爱.

I've upgraded from RN 0.54 to 0.57 and my app has pretty much fallen over due to using React Native Elements.

I took use of their error functionality on TextInput components which basically enabled props that you could style the error message and set your error message. Very convenient, however the upgrade has broke these and I'm now greeted with this error:

So I've delete that code and the error disappears, however I'm still receiving the issue when I run this code:

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

When I begin to type in to a text input, it sets my error message to an empty string, so if an error is returned typing in the field will make the error go away.

As soon as this.state.event.cards[i].fields[j].error becomes a string, I get returned this error. However you can see I check to see if error exists, then I just display the error, or try to at least.

Another set of eyes would be grateful on this one.

解决方案

I've shot myself in the foot too many times over this, so I'm leaving this here for the next person not to...

Whenever you see

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

99% of cases will be caused by using conditional rendering with only && instead of ternary ? : statements. Why? Because when your condition resolves to undefined, there are no components there, as opposed to null or an empty array which would have safely showed an empty space and save your life from the red screen of hell.

Change ALL OF YOUR LOGICAL CONDITIONAL RENDERS into ternary renditions.

ie:

DON'T DO

widgetNumber === 10 && <MyComponent />

DO DO

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

Every Single Time. Please. For the love of react native.

这篇关于不变违规:必须在 <Text> 中呈现文本字符串.成分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！