Javascript 不变违规：文本字符串必须在 <Text> 组件中呈现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52368342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Invariant Violation: Text strings must be rendered within a <Text> component
提问by Tare Gaskin
I've upgraded from RN 0.54 to 0.57 and my app has pretty much fallen over due to using React Native Elements.
我已经从 RN 0.54 升级到 0.57，由于使用 React Native Elements，我的应用程序几乎崩溃了。
I took use of their error functionality on TextInputcomponents 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:
我在TextInput组件上使用了它们的错误功能，这些功能基本上启用了可以设置错误消息样式并设置错误消息的道具。非常方便，但是升级已经破坏了这些，我现在遇到了这个错误：
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.
当我开始输入文本输入时，它会将我的错误消息设置为空字符串，因此如果返回错误，则在该字段中输入将使错误消失。
As soon as this.state.event.cards[i].fields[j].errorbecomes 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.
一旦this.state.event.cards[i].fields[j].error成为字符串，我就会返回此错误。但是你可以看到我检查是否存在错误，然后我只显示错误，或者至少尝试。
Another set of eyes would be grateful on this one.
另一双眼睛会感激这个。
采纳答案by Yuci
For me the following code works fine, as long as this.state.error === undefinedor it is not an empty string.
对我来说，以下代码工作正常，只要this.state.error === undefined它不是空字符串。
render() {
return (
<View>
{this.state.error &&
<Text>
Error message: {this.state.error}
</Text>
}
</View>
);
}
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
如果错误状态更改为空字符串 ''，则会出现上述异常： Invariant Violation: Text strings must be rendered within a <Text> component
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 === ''，以下表达式将被评估为空字符串，即 ''，这将导致Invariant Violation: Text strings must be rendered within a <Text> component
{this.state.error &&
<Text>
Error message: {this.state.error}
</Text>
}
When this.state.error === undefined, the expression will be evaluated as undefined, which is what we expect, and it's fine.
当 时this.state.error === undefined，表达式将被评估为undefined，这正是我们所期望的，这很好。
回答by Tare Gaskin
Also occurs when you have /* Comments */ in your return() function.
当您的 return() 函数中有 /* Comments */ 时也会发生。
回答by Otani Shuzo
I'd use !!which I call bang bang operator to boolianize error. That should work.
我会使用!!我称之为 bang bang 运算符的 boolianize error。那应该工作。
{!!this.state.error && (
<Text>
Error message: {this.state.error}
</Text>
)}
If erroris a string, whatever your text should be wrapped with <Text />as the error message says in React Native, which is different from web.
如果error是字符串，则无论您的文本应该用什么包装，<Text />就像 React Native 中的错误消息所说的那样，这与 web.xml 不同。
回答by serdarsenay
I've shot myself in the foot too many times over this, so I'm leaving this here for the next person not to...
我已经为此开枪打了自己的脚太多次了，所以我把这个留在这里，让下一个人不要……
Whenever you see
每当你看到
Invariant Violation: Text strings must be rendered within a <Text> component
99% of cases will be caused by using conditional rendering with only && instead of ternary ? : statements.
99% 的情况是由仅使用 && 而不是三元的条件渲染引起的？: 声明。
Change ALL OF YOUR LOGICAL CONDITIONAL RENDERS into ternary renditions.
将您所有的逻辑条件渲染更改为三元渲染。
ie:
IE：
DON'T DO
不要做
widgetNumber === 10 && <MyComponent />
DO DO
渡渡鸟
widgetNumber === 10 ? <MyComponent /> : []
Every Single Time. Please. For the love of react native.
每一次。请。对于反应原生的热爱。
回答by Ben B
For me, it happened because of an unopened curly brace inside JSX.
对我来说，这是因为 JSX 中有一个未打开的花括号。
<View>
{events.map(event => {
return (
<Card title={event.summary}>
<Text>Date: {event.start.dateTime}</Text>
</Card>
);
})}
} <------------ that was the culprit
</View>
回答by Melih Mucuk
This usually happens when you do inline conditional rendering. You should delete white space between Textand your condition like below.
这通常发生在您进行内联条件渲染时。您应该删除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>
}
回答by hksande
I encountered the same error message in VSCode yet I didn't have /* Comments */ or any expressions. The solution was to remove the formatting in something like textedit or word and copy+paste the code back to vscode.
我在 VSCode 中遇到了相同的错误消息，但我没有 /* Comments */ 或任何表达式。 解决方案是删除诸如 textedit 或 word 之类的格式，然后将代码复制并粘贴回 vscode。
I do not know why or how it works (perhaps it specifically happens in VSCode), but the formatting issue is something I also have experienced with SDL in graphql...
我不知道它为什么或如何工作（也许它特别发生在 VSCode 中），但格式问题也是我在 graphql 中使用 SDL 时遇到的问题...
回答by user12843746
{this.state.password.length > 0 && <Text>}
This will throw the same error, because it returns undefined. We can render it like this -
这将抛出相同的错误，因为它返回 undefined。我们可以这样渲染——
{this.state.password.length > ? <Text> : null}
回答by Teju
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
this above line < RadioForm is left unclosed that is the reason
上面这行 < RadioForm 未关闭，这就是原因
回答by SilverTech
From reading other answers here, this error message is vague and is shown for various reasons. I've gotten it when writing comments or even small white-space within views (crazy yeah...)
通过阅读此处的其他答案，此错误消息含糊不清，并且出于各种原因显示。我在写评论甚至视图中的小空白时得到了它（疯狂是的......）
for example: <View> {props.children} </View>
例如： <View> {props.children} </View>
must be changed to:
<View>{props.children}</View>
必须改为：
<View>{props.children}</View>
