React Native跨文件传递displayedAmount失败，报Text组件渲染错误

错误原因 #

1. 无效的变量导入：Pay.js中多余的import displayedAmount from './homepage'会引发变量冲突——你导入的是整个homepage组件而非目标状态变量，在<Text>{displayedAmount}</Text>中渲染组件直接触发了"文本字符串必须在组件内渲染"的错误。
2. 参数缺失风险：若跳转时未正确传递参数，route.params.displayedAmount会变为undefined，直接在Text组件中渲染undefined也会触发该错误。

修复步骤 #

步骤1：移除Pay.js中的错误导入 #

删除Pay.js里的这行无效代码：

import displayedAmount from './homepage'

步骤2：添加参数校验，避免渲染undefined #

在Pay组件中对参数做默认值处理，确保始终渲染有效字符串：

const { displayedAmount = "0" } = route.params || {};

步骤3：加固homepage的状态更新逻辑（可选优化） #

确保displayedAmount始终为合法字符串，处理用户仅输入小数点的边界情况：

// 在homepage的useEffect中修改decimal部分的处理
setDisplayedAmount(`${isNaN(parseInt(whole)) ? "0" : parseInt(whole).toLocaleString()}.${decimal || "00"}`);

修复后的Pay.js完整代码 #

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import React from 'react';
import { Feather } from '@expo/vector-icons';
import { createStackNavigator } from '@react-navigation/stack';
import homepage from './homepage';

const Pay = ({ route, navigation }) => {
    // 添加默认值，避免参数缺失导致的undefined
    const { displayedAmount = "0" } = route.params || {};
    
    const goToHome = () => {
        navigation.navigate('Homepage');
    };

    return (
        <View>
            <TouchableOpacity onPress={goToHome}>
                <Feather name="x" color="black" size={30} style={styles.cross} />
            </TouchableOpacity>
            <View
                style={{
                    borderBottomColor: 'grey',
                    borderBottomWidth: StyleSheet.hairlineWidth,
                    marginTop: 95,
                }}
            />
            <Text style={styles.to}>To</Text>
            <View
                style={{
                    borderBottomColor: 'grey',
                    borderBottomWidth: StyleSheet.hairlineWidth,
                    marginTop: 55,
                }}
            />
            <Text style={styles.for}>For</Text>
            <View
                style={{
                    borderBottomColor: 'grey',
                    borderBottomWidth: StyleSheet.hairlineWidth,
                    marginTop: 55,
                }}
            />
            <Text>{displayedAmount}</Text>
        </View>
    );
};

export default Pay;

const styles = StyleSheet.create({
    cross: {
        position: 'absolute',
        left: 15,
        top: 50,
    },
    to:{
        fontFamily: 'CashMarketMedium',
        fontSize: 16,
        position: 'absolute',
        left: 19,
        top: 110,
    },
    for:{
        fontFamily: 'CashMarketMedium',
        fontSize: 16,
        position: 'absolute',
        left: 19,
        top: 165,
    },
    line: {
        position: 'absolute',
        left: 15,
        top: 50 + 36 + 4,
        width: '100%',
        height: 1,
        backgroundColor: 'grey',
    },
});

额外注意点 #

• 确认导航栈中的页面名称一致：homepage组件导出为小写homepage，但跳转时用的是大写'Homepage'，需匹配导航栈配置，避免跳转失败。
• 检查homepage中goTopay函数是否绑定到按钮的onPress事件，确保参数正常传递。

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