固定冲突：文本字符串必须在<文本>组件中呈现

javascript react-native

2022-08-30 02:45:05

我已经从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

我已经为此向自己开了太多枪，所以我把这个留在这里，让下一个人不要......

每当您看到

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

99% 的情况是由仅使用 && 而不是三元的条件渲染引起的？：语句。为什么？因为当你的情况解析为未定义时，那里没有组件，而不是null或一个空数组，它可以安全地显示一个空白空间，并从地狱的红色屏幕中拯救你的生命。

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

即：

不要做

widgetNumber === 10 && <MyComponent />

做做

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

每一次。请。对于反应原生的热爱。

答案 2

当您在 return（）函数中有 /* 注释 */ 时也会发生这种情况。