使用setTimeout渲染隐藏文本时遇<Text>组件报错排查

报错核心原因 #

1. 布尔值被当作文本节点渲染 #

React Native 不允许直接渲染布尔值、数字这类非合法渲染内容（文本必须包裹在<Text>组件内）。你的条件渲染{!!showWarning && <View...>}在showWarning为false时，会返回false这个布尔值，React Native 会将其识别为待渲染的文本节点，从而触发Text strings must be rendered within a <Text> component错误。

2. 定时器逻辑失效 #

你的useEffect依赖项为空数组[]，仅会在组件首次挂载时执行一次。当点击按钮触发setShowWarning(true)后，showWarning状态变化，但useEffect不会重新执行，导致定时器无法创建，警告无法自动隐藏。

修复后的完整代码 #

import React, {useState, useEffect, useRef} from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

const App = () => {
    const [showWarning, setShowWarning] = useState(false);
    const timerId = useRef(null);

    useEffect(() => {
        if (showWarning) {
            // 5秒后自动隐藏警告
            timerId.current = setTimeout(() => {
                setShowWarning(false);
            }, 5000);
        }

        // 清理定时器：组件卸载或状态变化时执行
        return () => {
            clearTimeout(timerId.current);
        };
    }, [showWarning]); // 添加showWarning为依赖，状态变化时重新触发useEffect

    const handleClick = () => {
        setShowWarning(true);
    };

    return (
        <View style={styles.container0}>
              {/* 用三元表达式替代逻辑与，条件不满足时返回null，避免渲染布尔值 */}
              {showWarning ? 
                  <View style={styles.warningMsg}>
                     <Text style={styles.text4}>This is a Warning !</Text>
                  </View>
              : null}

              <TouchableOpacity style={styles.btn} onPress={handleClick}>
                  <Text style={styles.text4}>Show Warning</Text>
              </TouchableOpacity> 
        </View>
    );
}

export default App; 

const styles = StyleSheet.create({
    container0: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        height: '100%',
     },
 
     text4: {
        alignSelf: 'center',  
        color: '#000000',
        fontFamily: 'Georgia',
        fontSize: 20,
        padding: 10, // 补充内边距，优化文本显示
    },

    warningMsg: {
        borderColor: 'orange',
        borderWidth: 2, // 补充borderWidth，否则边框无法显示
        borderStyle: 'solid',
        backgroundColor: 'rgb(210, 153, 124)',
        borderRadius: 8,
        marginBottom: 20,
    },

    btn: {
        borderColor: 'darkgreen',
        borderWidth: 2,
        borderStyle: 'solid',
        borderRadius: 15,        
        backgroundColor: '#e8f5e9',
    }, 
});

关键修复说明 #

• 替换条件渲染方式：用{showWarning ? ... : null}替代逻辑与表达式，避免渲染布尔值
• 完善useEffect依赖：添加[showWarning]确保状态变化时重新执行定时器逻辑
• 补充样式细节：添加borderWidth让边框正常显示，增加内边距优化UI美观度

内容的提问来源于stack exchange，提问作者SIMON SERWADDA