【问题标题】：Invariant Violation: Text strings must be rendered within a <Text> component不变违规：文本字符串必须在 <Text> 组件内呈现
【发布时间】：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 没有错误，并且您没有意外添加任何意外文本。

标签： javascript react-native

【解决方案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>

【讨论】：