不变违规：文本字符串必须在< Text>内呈现零件 [英] Invariant Violation: Text strings must be rendered within a <Text> component

问题描述

我已经从RN 0.54升级到0.57，由于使用了React Native Elements，我的应用程序已经大大减少。

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

我使用了他们的错误功能 TextInput 组件基本上启用了道具，您可以设置错误消息的样式并设置错误消息。非常方便，但升级打破了这些，我现在迎接这个错误：

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.

只要 this.state.event.cards [i] .fields [j] .error 就变成了字符串，我收到此错误。但是你可以看到我检查是否存在错误，然后我只是显示错误，或至少尝试。

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.

推荐答案

对我来说，下面的代码工作正常，只要 this.state.error == = undefined 或它不是空字符串。

For me the following code works fine, as long as this.state.error === undefined or it is not an empty string.

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

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

如果错误状态更改为空字符串''，您将拥有上述异常：不变违规：文本字符串必须在< Text>内呈现组件

If the error state is changed to empty string '', you will have the aforementioned exception: Invariant Violation: Text strings must be rendered within a <Text> component

原因是，当 this.state.error ===''，以下表达式将被评估为空字符串，即''，这将导致不变违规：文本字符串必须在< Text>内呈现组件

The reason of that is, when this.state.error === '', the following expression will be evaluated as empty string, i.e., '', and this will cause 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 ，这正是我们所期望的，而且没关系。

When this.state.error === undefined, the expression will be evaluated as undefined, which is what we expect, and it's fine.

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