React Native 错误，“文本字符串必须使用 <Text> 组件渲染”，但它不是文本字符串？

问题描述 投票：0回答：3

我正在尝试以 React Native 方式制作一个聊天应用程序，并使用 Firebase 进行数据和身份验证。 我现在正在尝试制作一个显示聊天提要的屏幕，使用 firestore 从我的 firebase 项目中获取消息集合。 在我尝试制作这样的屏幕时，发生了错误； “文本字符串必须使用 组件呈现”，以及显示这是错误的指示器，在 setLoading(false)

useEffect(() => {
      const unsubscribe = firestore()
        .collection('chats')
        .orderBy('createdAt', 'asc')
        .limitToLast(15)
        .onSnapshot(querySnapshot => {
          const chatsArr = [];
          querySnapshot.forEach(doc => {
            const id = doc.id;
            const data = doc.data();
            chatsArr.push({id, ...data});
          });
          setLoading(false);
          setChats(chatsArr);
        });
  
      return () => {
        unsubscribe();
        setLoading(false);
      };
    }, []);

这是堆栈：

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in RCTView (created by View)
    in View (created by MainScreen)
    in MainScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in Chattr(RootComponent), js engine: hermes

这是主屏幕的所有代码：

import React, {useEffect, useState} from 'react';
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';
import {
  View,
  StyleSheet,
  Text,
  Alert,
  ActivityIndicator,
  FlatList,
} from 'react-native';
import ChatMessage from '../components/ChatMessage';
import SignOutButton from '../components/SignOutButton';

const MainScreen = () => {                    // Input text
    const [chats, setChats] = useState([]);                    // Chat messages
    const [loading, setLoading] = useState(true);       
    
    const handleSignOut = async () => await auth().signOut();// Loading state
  
  
    useEffect(() => {
      const unsubscribe = firestore()
        .collection('chats')
        .orderBy('createdAt', 'asc')
        .limitToLast(15)
        .onSnapshot(querySnapshot => {
          const chatsArr = [];
          querySnapshot.forEach(doc => {
            const id = doc.id;
            const data = doc.data();
            chatsArr.push({id, ...data});
          });
          setLoading(false);
          setChats(chatsArr);
        });
  
      return () => {
        unsubscribe();
        setLoading(false);
      };
    }, []);
  
    if (loading) {
      return <ActivityIndicator />;  // Show loader while loading chats
    } else {
      const username = auth().currentUser.displayName;
  
      return (
        <View style={styles.container}>
          // Top app bar
          <View style={styles.textContainer}>
            <Text style={styles.text}>{username}</Text>
            <SignOutButton handleClick={handleSignOut} />
          </View>
  
          // Chats container
          <View style={styles.chatStyle}>
            {chats && (
              <FlatList
                data={chats}
                renderItem={({item}) => <ChatMessage key={item.id} chat={item} />}
              />
            )}
          </View>
        </View>
      );
    }
}

const styles = StyleSheet.create({
    chatStyle: {
      alignItems: 'center',
      justifyContent: 'center',
      height: '90%',
      margin: 0,
      padding: 0,
      marginLeft: 'auto',
      marginRight: 'auto',
      // overflowY: 'scroll',
    },
    container: {
      height: '100%',
      width: '100%',
      margin: 0,
      marginTop: 0,
      marginBottom: 0,
      padding: 0,
      paddingBottom: '15%',
      paddingTop: 0,
      backgroundColor: '#151718',
      alignItems: 'flex-start',
      justifyContent: 'space-between',
    },
    inputContainer: {
      width: '100%',
      height: 60,
      position: 'absolute',
      flexDirection: 'row',
      bottom: 0,
      left: 0,
      right: 0,
      margin: 0,
      padding: 0,
      paddingBottom: 0,
      backgroundColor: '#151718',
      alignItems: 'center',
      justifyContent: 'center',
      borderWidth: 1,
      borderColor: '#1e2123',
      borderLeftWidth: 0,
      borderRightWidth: 0,
      borderBottomWidth: 0,
    },
    text: {
      fontWeight: '600',
      fontSize: 20,
      color: '#030303',
      marginRight: 'auto',
      marginLeft: 8,
      padding: 4,
    },
    textContainer: {
      flexDirection: 'row',
      height: 60,
      width: '100%',
      margin: 0,
      padding: 8,
      elevation: 6,
      backgroundColor: '#ffa600',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
  });

export default MainScreen;

我的问题是，为什么我会收到此错误？我现在真的不知道这是在哪里发生的，我已经坐了几个小时了，现在正在努力寻找解决方案。

运行 npm start，npm start android，应用程序构建成功，但出现错误，错误消息后面没有渲染任何屏幕。

android reactjs firebase react-native
3个回答
2
投票

从代码中删除以下内容

// Top app bar

// Chats container

这不被视为注释，而是返回语句中的文本，因此请将其删除或更改为以下内容

{/* Top app bar */}

{/* Chats container */}
0
投票

如果错误是这样的 -

“警告：错误：文本字符串必须在组件内呈现”

一般来说，如果在代码中没有发现任何错误，则会给出检查空间 - 

<TouchableOpacity onPress={shareService}> <Text>Hello</Text></TouchableOpacity>

我收到了同样的错误，并删除了之前的空格并解决了，希望这有帮助

-1
投票

您看到的错误消息“文本字符串必须在组件内呈现”通常意味着您正在尝试在组件中的某个时刻在组件外部呈现纯字符串。 React Native 需要这个来渲染文本。

MainScreen 组件中的以下代码行可能是问题的根源：

<View style={styles.textContainer}>
  <Text style={styles.text}>{username || 'Guest'}</Text>
  <SignOutButton handleClick={handleSignOut} />
</View>

确保字符串用户名有效。为了避免这个问题，您可能需要处理用户名为空或未定义的情况。该组件可以有条件地渲染，也可以使用默认值。

这保证了如果默认用户名为 false（空或未定义），则默认用户名将为“Guest”。使其适应您的应用程序的逻辑。

如果问题仍然出现，您可能还想确保在未先通过查看 ChatMessage 组件将其封装在组件中的情况下，您不会尝试渲染裸字符串。

此外，确认在没有组件的情况下没有其他代码段呈现纯字符串。 setLoading(false) 行是错误消息的来源；然而，其他组件的渲染可能是问题的原因。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.