javascript - 不变违规 : Text strings must be rendered within a <Text> component

Question

我已从 RN 0.54 升级到 0.57，但由于使用 React Native Elements，我的应用程序几乎崩溃了。

我在 TextInput 组件上使用了它们的错误功能，这些组件基本上启用了您可以设置错误消息样式并设置错误消息的 Prop 。非常方便，但是升级破坏了这些，我现在遇到了这个错误:

所以我删除了该代码并且错误消失了，但是当我运行此代码时我仍然收到问题:

{ 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 成为字符串，我就会返回此错误。但是您可以看到我检查是否存在错误，然后我只是显示错误，或者至少尝试一下。

另一双眼睛会对这一双眼睛表示感激。

Answer 1

我已经为此多次搬起石头砸自己的脚，所以我把这个留在这里，以免下一个人...

每当你看到

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

99% 的情况是由于仅使用 && 而不是三元来使用条件渲染造成的？ : 陈述。为什么？因为当你的条件解析为未定义时，那里没有任何组件，而不是 null 或空数组，它们可以安全地显示一个空白空间并从 hell 的红屏中拯救你的生命。

将所有逻辑条件渲染更改为三元渲染。

即:

不要这样做

widgetNumber === 10 && <MyComponent />

做做

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

每一次。请。出于对 React Native 的热爱。