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

当return（）函数中具有/ *注释* /时，也会发生。

Answer 2

从此处阅读其他答案后，此错误消息很模糊，并且由于各种原因而显示。在视图中写评论或什至是小空格时，我已经明白了（是的……）

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

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

Answer 3

对我来说，发生这种情况的原因是JSX内的花括号未打开。

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

我将使用有效的!! bang bang运算符。


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

Answer 6

通常在进行内联条件渲染时发生。您应该删除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 7

我在VSCode中遇到了相同的错误消息，但是我没有/ *注释* /或任何表达式。 解决方案是删除诸如textedit或word之类的格式，然后将代码复制并粘贴回vscode。

我不知道它为什么工作或如何工作（也许是在VSCode中专门发生的），但是格式问题也是我在graphql中使用SDL时遇到的。

Answer 8

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

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

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

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

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

Answer 9

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

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

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

const [category, setCategory] = useState(null)

问题解决了。

Answer 10

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

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

Answer 11

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

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

到

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

Answer 12

有一个操作员！它将字符串类型转换为布尔值，并在变量为空字符串时将其设置为false：

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

Answer 13

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

花了一天的大部分时间去做完全无关的任务来尝试解决此问题。

Answer 14

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

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

Answer 15

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

<View>
{' '}
</View>

删除此按钮，您应该没事。

Answer 16

在我看来，这是因为渲染功能中的注释

// Some comment here

解决方案：

删除评论
或使其像这样{/* Same comment here*/}

Answer 17

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

第一个代码就像

<AppText> </AppText>

当我尝试不同的事情时，我只是用自动关闭的语法编写了它

<AppText />

然后问题突然解决了。

我认为这只是我在标签之间误写的特殊且不可见的字符或此字符是来自VSCode的自动完成功能或摘要，因为我无法通过放置空格来重复该错误。

Answer 18

发生这种情况是因为我偶然使用了小写的函数名：

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组件，这是必需的。

Answer 19

我遇到了同样的问题，错误是在子级和诸如{children}的组件之间增加了空间

注意：删除{children}附近的所有空格

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

Answer 20

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

以上这行

Answer 21

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

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

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

Answer 22

就我而言，此错误是由于分号';'的出现而发生的在“文本”标签关闭的末尾。对于所有以上未获得适当答案的人，请尝试此操作。通过删除分号，错误消失了。

Answer 23

在这件事上，我在脚上开枪已经太多次了，所以我把它留在这里，以便下一个人不要...

每当看到

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

99％的案例将由仅使用&&而不是三进制的条件呈现引起。：声明。

将所有逻辑条件渲染器更改为三元表示法。

即：

不做

widgetNumber === 10 && <MyComponent />

要做

widgetNumber === 10 ? <MyComponent /> : []

每一次。请。为了热爱本土人。

Answer 24

尝试：

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

Answer 25

 <React.Fragment>
      {this.props.title ? (
        <React.Fragment> 
          <Text>  true </Text>
        </React.Fragment>
        ):(             
           <React.Fragment> 
          <Text>  false </Text>
          <Text>  false </Text>
        </React.Fragment>

您必须使用 View 标签或 React.Fragment 标签进行包装，如果元素多于一个，则还需要包装内部

Answer 26

this.state.recording ?(<Text>{this.secondsToMMSS(this.state.seconds)}</Text>) :                                     (null)

文本字符串必须在组件中呈现

Answer 27

好的，所以如果你走到这一步，那是因为你可能和我有同样的问题：

返回{列}

和：

返回{行}

你看到在 "> {" 之间有一个空格是的，这就是整个问题，尝试删除它们。

Answer 28

只需从代码中删除注释，即可正常工作。顺便说一下，我不知道其他任何选择！：）

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

28 个答案: