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

Posted 2023-02-22

【中文标题】不变违规：文本字符串必须在 <Text> 组件内呈现

【英文标题】：Invariant Violation: Text strings must be rendered within a <Text> component

【发布时间】：2019-02-21 09:55:52

【问题描述】：

我已经从 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 变成一个字符串，我就会返回这个错误。但是你可以看到我检查是否存在错误，然后我只是显示错误，或者至少尝试。

另一双眼睛会感激这个。

【问题讨论】：

确保您的 JSX 没有错误，并且您没有意外添加任何意外文本。

【参考方案1】：

在我的情况下，我正在导入

从 'react-native-web' 导入 Button, View ;

而不是

从 'react-native' 导入 Button, View ;

确保您从正确的包中导入。

【参考方案2】：

<Pressable> 也出现错误。所以避免按下而不是反应原生按钮。可能对使用 react-native 6 或更高版本的人有所帮助。

要不然试试这个方法

<Pressable titleSize=20 style=styles.button>
  <Text>Pressable tab
</Text>
</Pressable>

【参考方案3】：

解决方案

!! 将解决此问题。

!!error && <Text>error</Text>

说明

如果我们使用单个而不是 ! 操作并分配空的 "" 字符串，那么 !"" 将变为 true 并将呈现空字符串，因为我们正在将字符串转换为布尔值 !"" => true

【参考方案4】：

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

例如：

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

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

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

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

正确的实现应该是：

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

或

表示否定； !a && <View /> 和 !b && <View />

快乐学习；）

【参考方案5】：

好吧，如果你走这么远，那是因为你可能和我有同样的问题，例如：

return <View key=r> columns </View>

和：

return <View style=styles.container> rows </View>

你看之间有一个空格 "> " 是的，这就是整个问题，请尝试删除那些。

【参考方案6】：

在我的情况下，Tanveer Rifu's answer 工作。但除此之外，如果您的 return 语句中有空格，您可以通过将其括在括号 () 中并每个标签使用一行来解决此问题。

示例，而不是

const HelloWorld = () => 
    let counter = 0;
    return <View> <Button title="Increment"> </Button><Text> counter</Text> </View>
 

你可以像下面这样包装它

const HelloWorld = () => 
    let counter = 0;
    return (
        <View>
            <Button title="Increment"></Button>
            <Text>counter </Text> 
        </View>
    )

但是，如果您要在单行中有多个元素，请不要在不同标签之间留空格。

【参考方案7】：

在我的情况下，由于分号“;”的存在而发生此错误在 Text 标签的结尾处。对于所有没有得到上述适当答案的人，试试这个。通过删除分号，错误消失了。

Image of the Error code

如上图所示，由于分号';'，我也遇到了这个错误

【参考方案8】：

带有 ''（空字符串）的条件不起作用。将它们更改为null

不工作：

<ButtonBorderLarge
    buttonText='Choose certificate'
    onPressHandler=pickCertificate
    icon=docName ? 'check' : ''
/>

工作：

<ButtonBorderLarge
    buttonText='Choose certificate'
    onPressHandler=pickCertificate
    icon=docName ? 'check' : null
/>

【参考方案9】：

对于我来说，由于尾随';'而出现此错误 我改变了：

<Divider orientation="horizontal" />;

收件人：

<Divider orientation="horizontal" />

【参考方案10】：

在我的例子中，我将状态文本命名为组件的名称，以确保它是不同的名称。

【参考方案11】：

从任何组件外部删除标记()，这用于在返回后和JSX中的if语句()

这是错误的： <View>(<Button/>)</View> 这是真实的： <View><Button/></View>

【参考方案12】：

删除外部组件之间的空间

<Text></Text>

例如。不要使用

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

但是使用

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

【讨论】：

这对我有用。

谢谢。几个月来我讨厌这个问题。现在，我知道要小心这个错误的三件事。 1-您提到的不必要的空格2-三元操作失败3-使用带有/>的标签

【参考方案13】：

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

只要你看到

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

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

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

即：

不要这样做

widgetNumber === 10 && <MyComponent />

做做

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

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

【讨论】：

最佳答案！与诉诸 !!this.state.error &&

相比，这种使用三元运算符的方法在我看来是一个更强大的想法

确实是最好的。救命恩人！

谢谢@serdarsenay！

@NickTiberi 它可以工作，因为当您返回一个空对象时，它不是返回渲染的有效组件，但是空数组是。当您有一个条件块，并且条件为假，并且您没有返回后备组件或数组时，由于返回的组件无效，就会发生不变量违规。希望这会有所帮助。

返回 null 而不是空数组也可以，并且在语义上可能更合适。

【参考方案14】：

对我来说，错误是因为我将状态对象初始化为空字符串。

const [category, setCategory] = useState("")

如果状态将是一个对象，那么它必须在开始时设置为null。

const [category, setCategory] = useState(null)

问题解决了。

【参考方案15】：

下面的代码还检查空字符串和真值。

  return(
    <View>
    !!this.state.error && <Text>this.state.errorMessage</Text>
    </View>
  );

【参考方案16】：

就我而言，我必须删除 View 标签和 Text 标签之间的空格 来自

<View>  <Text style= color: "white">Start</Text> </View>

到

<View><Text style= color: "white">Start</Text></View>

【参考方案17】：

对我来说，这是由于在 TouchableOpacity React native touchable Opacity 中关闭 > 的位置错误。

错误代码：

<TouchableOpacity>
        onPress=() => this.setState( showOverLay: true )
          <Image
            source=cardImage
            resizeMode="contain"
            style=[
              styles.cardImage, cardImageStyle
            ]
          />
</TouchableOpacity>

好代码：

  <TouchableOpacity
        onPress=() => this.setState( showOverLay: true )>
          <Image
            source=cardImage
            resizeMode="contain"
            style=[
              styles.cardImage, cardImageStyle
            ]
          />
</TouchableOpacity>

【参考方案18】：

有运营商！！它将字符串类型转换为布尔值，并在变量为空字符串时使其为假：

!!error &&
  <Text>
    Error message: error
</Text>

【参考方案19】：

当您的return() 函数中有/*Commented code*/ 时会发生此错误。

一天中的大部分时间都在做完全不相关的任务来尝试解决这个问题。

【参考方案20】：

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

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

问题的根源在于逻辑短路。在 javascript 逻辑表达式中求值，&& 求值为最后一个 true 等效值。但不是true，而是转换为布尔值之前的实际值。这就是实际允许此语法开始的原因。因为如果condition 是true，则<Element/> 始终是true，因此表达式的计算结果为<Element/>

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

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

【讨论】：

谢谢！原来我也是这样。

【参考方案21】：

如果初始值为空字符串，请使用下面给出的代码。或有条件地检查初始值。这里我有条件地检查错误何时不为空然后显示错误。

this.state.error !== '' && (
    <Text>
      this.state.error
    </Text>
)

【参考方案22】：

有时 Prettier 或您的代码格式化程序会在您保存时将其添加到您的 JSX。

<View>
' '
</View>

删除它，你应该没问题。

【讨论】：

这对我有用。

【参考方案23】：

在我的情况下，它发生是因为渲染函数中的 cmets

// Some comment here

解决方案：

删除评论 或者像这样/* Same comment here*/

【参考方案24】：

我遇到了同样的问题， 在我的例子中，我有一个 <AppText> 组件，它在后台显示了简单格式的 <Text>。

第一个代码是这样的

<AppText> </AppText>

当我尝试不同的东西时，我只是用自闭语法编写了它

<AppText />

然后问题突然解决了。

我认为这只是我错误地在标签之间写的一个特殊且不可见的字符 或者这个字符是通过自动完成功能或 sn-ps 来自 VSCode， 因为我不能通过放置空格来重复错误。

【参考方案25】：

这发生在我身上，因为我不小心使用了小写的函数名：

export const p = (props) => 
  return (
    <Text style=[styles.p]>props.children</Text>
  );
;

应该是：

export const P = (props) => 
  return (
    <Text style=[styles.p]>props.children</Text>
  );
;

注意第二个p 是大写的。为了将组件检测为 React Native 组件，这是必需的。

【参考方案26】：

我遇到了同样的问题，错误是在子元素和 children 等组件之间添加空间

注意：移除 children 附近的所有空格

 <Provider value=something>children</BlogContext.Provider>

【参考方案27】：

通过阅读此处的其他答案，此错误消息含糊不清，并且出于各种原因而显示。我在编写 cmets 甚至视图中的小空白时得到了它（疯了是的......）

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

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

【参考方案28】：

In my case some part of the code was out side the text component for example:
<RadioForm style=styles.radiobutton 
                      radio_props=hobbies
                      initial=1
                      onPress=(value) => Toastandroid.show(value.toString(), ToastAndroid.SHORT)
                      buttonSize=4.5
                      buttonOuterSize=19
                      selectedButtonColor='green'
                      selectedLabelColor='green'
                      labelStyle= fontSize: 14, 
                      disabled=false
                      formHorizontal=true
             />
<RadioForm

上面这行

【参考方案29】：

this.state.password.length > 0 && <Text>

这将引发相同的错误，因为它返回未定义。 我们可以这样渲染 -

this.state.password.length > ? <Text> : null

【参考方案30】：

对我来说，这是因为 JSX 中有一个未打开的花括号。

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