不变违规:文本字符串必须在<Text>组件中呈现

Question

我已经从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成为字符串,我就会收到此错误.但是你可以看到我检查是否存在错误,然后我只是显示错误,或至少尝试.

另一组眼睛会对此感激不尽.

Answer 1

我已经为此开枪打了自己的脚太多次了，所以我把这个留在这里，让下一个人不要……

每当你看到

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

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

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

IE：

不要做

widgetNumber === 10 && <MyComponent />

渡渡鸟

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

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

Answer 2

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

Answer 3

当您在 && 运算符中使用字符串或数值时，会发生这种情况。

例如：

const [a, setA] = useState('')
const [b, setB] = useState(0)

在这里，a && <View />和b && <View />都会抛出这个错误。

您需要将此条件值作为true/false, null,orundefined数据类型。

string and numeric data types您应该将它们转换为类型，而不是直接使用Boolean。

正确的实施应该是：

!!a && <View />和!!b && <View />

或者

用于否定；!a && <View />和!b && <View />

Answer 4

对我来说，以下代码可以正常工作，只要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 === ''，以下表达式将被评估为空字符串，即“”，这将导致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，这就是我们所期望的，这很好。

Answer 5

删除外部组件之间的空间

<Text></Text>

前任。不要使用

<Button> <Text>hi</Text></Button> 

但使用

<Button><Text>hi</Text></Button>

Answer 6

就我而言，它是 JSX 语法末尾的分号。

// wrong:
<View>
  <MyComponent>;
</View>

// correct:
<View>
  <MyComponent>
</View>

Answer 7

就我而言，此错误是由于分号“;”的存在而发生的。在文本标签结束的末尾。对于所有没有得到上述正确答案的人，请尝试这个。通过删除分号，错误消失了。

错误代码的图像

如上图所示，由于分号“;”，我也遇到了此错误

Answer 8

我会用!!我称之为bang bang运算符的布尔值进行布尔化error。那应该工作。

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

如果error是字符串，则应使用任何包装文本，<Text />如React Native中的错误消息所述，这与Web不同。

Answer 9

对我来说，发生这种情况是因为 JSX 中的大括号未打开。

<View>
        {events.map(event => {
          return (
            <Card title={event.summary}>
              <Text>Date: {event.start.dateTime}</Text>
            </Card>
          );
        })}
        } <------------ that was the culprit
</View>

Answer 10

遇到了同样的问题，@serdasenay 的评论让我意识到了根本原因。

使用语法{condition && <Element/>}本身并没有错，但重要的是要知道发生了什么。

问题的根源在于逻辑短路。在 Javascript 逻辑表达式中计算，并&&计算为最后一个true等效值。但不是 to true，而是转换为布尔值之前的实际值。这实际上是允许此语法开始的原因。由于<Element/>is 总是trueif conditionis true，表达式计算为<Element/>

当条件为 时，问题就出现了false。当&&表达式失败时，它的计算结果为第一个值，即condition。但在它被转换为布尔值之前。因此，如果您使用直接字符串或数字 ascondition并且它的计算结果为false逻辑表达式将计算为该字符串或数字。例如：{array.length && <List/>}使用空数组评估{0}抛出错误。

解决方案是确保condition是一个真正的布尔值（这是可行的，因为 React 可以处理渲染布尔值 - 它认为 React 只是忽略它们）。因此，请执行以下操作： {array.length > 0 && <List/>}

Answer 11

对我来说，这是 IntelliSense 的错误导入。它从“react-native-web”而不是“react-native”导入按钮。一旦您在手机上运行，​​您就会收到此错误。

Answer 12

当您进行内联条件渲染时，通常会发生这种情况。您应该删除 和 您的条件之间的空白，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>
}

Answer 13

从这里阅读其他答案，这个错误消息很模糊，并且由于各种原因而显示。我在写评论甚至视图中的小空白时就得到了它（疯狂是的......）

例如：<View> {props.children} </View>

必须改为： <View>{props.children}</View>

Answer 14

就我而言，它是像这样的自关闭组件之后的一个随机字母

<Card />r