React Native 为什么我得到“文本字符串必须在组件内呈现< Text>”?

8yoxcaq7  于 2023-06-06  发布在  React
关注(0)|答案(2)|浏览(124)

我用React Native做了一个应用,得到了这个错误:
Error: Text strings must be rendered within a <Text> component.
代码:

const [childsName, setChildsName] = useState('');
  const [childsNameToBeLinked, setChildsNameToBeLinked] = useState('');
  const [email, setEmail] = useState('');
  const [code, setCode] = useState('');
  const [isParent, setParent] = useState(false);
  const [isChild, setChild] = useState(false);
  const [isLinked, setLinked] = useState(false);
  const [allDoneForParents, setAllDoneForParents] = useState(false);
  const [childsNameAddedNotif, setChildsNameAddedNotif] = useState('');
  const [uri, setUri] = useState('');

  return (
      <View style={styles.container}>
        {!isParent && !isChild && (
          <View>
            <View style={styles.buttonContainer}>
               <Button title="This Is Child's Phone" onPress={() => setChild(true)} />
            </View>
            <View style={styles.buttonContainer}>
              <Button title="This Is Parent's Phone" onPress={() => setParent(true)}  />
            </View>

          </View>
        )}
        {isParent && (
          <View>
            <View style={styles.inputContainer}>
              <TextInput placeholder='@' onChangeText={(val) => setEmail(val)} value={email} />
            </View>
            <View style={styles.inputContainer}>
              <TextInput placeholder='Enter Code' onChangeText={(val) => setCode(val)} value={code} />
            </View>
            {childsNameAddedNotif && (
              <View>
                <Text>{childsNameAddedNotif}'s Phone Has Been Linked</Text>
              </View>
            )}
            {!childsNameAddedNotif && (
              <View style={styles.submitBtn}>
                <Button title='Submit' onPress={handleSubmit} />
              </View>
            )}
            
            <View style={styles.backBtnContainer}>
              <BackBtn onPress={() => setParent(false)} />
            </View>
          </View>
        )}
        {isChild && !isLinked && !code && (

              <View>
                <View style={styles.inputContainer}>
                  <TextInput placeholder="Child's First Name" onChangeText={(val) => setChildsName(val)} value={childsName} />
                </View>
                <View style={styles.submitBtn}>
                  <Button title='Submit' onPress={handleSubmit} />
                </View>
                <View style={styles.backBtnContainer}>
                  <BackBtn onPress={() => setChild(false)} />
                </View>
              </View>
          )}
        {isChild && !isLinked && code && (
              <View>
                <Text>OK, now use your phone, tap on This Phone Parent's Phone, enter your email and {code}</Text>
              </View>
          )}
        {isLinked && !allDoneForParents && (
          <View>
            <View>
              <Text>{childsNameToBeLinked}'s Phone Is Now Linked</Text>
              <Text>Would You Like To Link More Children ?</Text>
            </View>
            <View>
              <Button title='Yes' onPress={() => setLinked(false)} />
            </View>
            <View>
              <Button title='No' onPress={() => setAllDoneForParents(true)} />
            </View>
          </View>
        )}
        {allDoneForParents && (
          <View>
            <Text>All Done For You Now. Little Angel Will Notify You If Needed.</Text>
            <Text>Have a Nice Day :) </Text>
          </View>
        )}

      <StatusBar style="auto" />
    </View>

  );
}

你能看到我的字符串不在文本组件中的位置吗?

4xrmg8kj

4xrmg8kj1#

好吧,这经常发生在我身上,通常是,imo,文本编辑器。我复制了你的代码,没有得到这个错误。我也看不出在Text组件之外哪里有不合适的字符串。由于我不能,这里有几种不同的方法,您可以排除故障,而不必向我们发送所有代码。
我解决这个问题的最快方法是注解掉所有内容,然后慢慢地取消注解每个部分,直到我找到错误的来源并从那里开始。通常是一个你看不到的空格或不合适的条件句。
如果你使用的是VSCode,有时候如果一个标签后面有一个空格[例如:]当您按ctrl + s保存时,它会将该空格作为文本字符串。但通常情况下,它会留下{”}。
如果这些都不起作用,您可以尝试将字符串条件转换为

childsNameAddedNotif !== ""

虽然这意味着同样的事情,但这是一种尝试,因为有时这是我的问题。
将模板字符串添加到Text组件不会对您使用它的方式产生任何影响。

pokxtpni

pokxtpni2#

这条线的问题

<Text>{childsNameToBeLinked}'s Phone Is Now Linked</Text>

您需要为变量添加模板字符串和美元符号。

<Text>{`${childsNameToBeLinked}'s Phone Is Now Linked`}</Text>

对于相同的

<Text>{childsNameAddedNotif}'s Phone Has Been Linked</Text>

应该是的

<Text>{`${childsNameAddedNotif}'s Phone Has Been Linked`}</Text>

相关问题