React Native新手求助：TextInput接收JSON数据报错及页面传参问题

嘿，我来帮你搞定这个问题！你遇到的invalid prop 'value' of type 'object' supplied to 'TextInput'错误，本质是你给TextInput传了一个对象当value，但它只接受字符串。咱们一步步拆解问题，从后端到前端彻底修复：

第一步：修复PHP后端，返回正确的用户数据JSON #

目前你的后端只返回了"Data Matched"字符串，没有把用户的firstname/lastname等数据返回给前端，这导致前端根本拿不到要展示的用户信息。修改后端的成功响应部分：

<?php
// Importing DBConfig.php file.
include 'DBConfig.php';
// Creating connection.
$con = mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);
// Getting the received JSON into $json variable.
$json = file_get_contents('php://input');
// decoding the received JSON and store into $obj variable.
$obj = json_decode($json,true);
// 使用前端传过来的手机号进行查询，去掉硬编码
$mobileno = $obj['mobileno']; 

// Applying User Login query with mobile number match.
$Sql_Query = "select firstname,lastname,email,profession from member where mobileno = '$mobileno' ";
// Executing SQL Query.
$result = mysqli_query($con,$Sql_Query);
$check = mysqli_fetch_array($result);

if(isset($check)){
    // 把成功消息和用户数据一起封装成JSON对象返回
    $response = [
        'status' => 'success',
        'message' => 'Data Matched',
        'userData' => [
            'firstname' => $check[0],
            'lastname' => $check[1],
            'email' => $check[2],
            'profession' => $check[3],
            'mobileno' => $mobileno
        ]
    ];
    echo json_encode($response);
} else{
    // 失败响应也用统一的JSON格式
    $response = [
        'status' => 'error',
        'message' => 'Enter valid phone number'
    ];
    echo json_encode($response);
}
mysqli_close($con);
?>

注意：我把硬编码的手机号改成了前端传过来的$obj['mobileno']，这样才能根据用户输入的手机号查询对应数据。

第二步：修复React Native第一页的请求&数据传递逻辑 #

你之前犯了两个关键错误：

1. 没有从后端返回的响应里提取用户数据，反而把整个this.state（一个对象）传给了跳转参数
2. 后端本来就没返回用户数据，导致前端根本拿不到有效信息

修改第一页的UserLoginFunction：

constructor(props) {
    super(props)
    this.state = { UserMNO: '' }
}

UserLoginFunction = () => {
    const { UserMNO } = this.state;

    fetch('http://demo.weybee.in/react/User_Login.php', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            mobileno: UserMNO,
        })
    })
    .then((response) => response.json())
    .then((responseJson) => {
        console.log(responseJson);
        // 现在后端返回的是带status的JSON对象，判断status
        if(responseJson.status === 'success') {
            const userData = responseJson.userData;
            this.refs.toast.show('Login successful', 500, () => {
                const { navigation } = this.props;
                // 传递单个字符串值，而不是对象
                navigation.navigate("Profile", {
                    firstName: userData.firstname,
                    lastName: userData.lastname,
                    email: userData.email,
                    profession: userData.profession,
                    mobileno: userData.mobileno
                });
            });
        } else {
            Alert.alert(responseJson.message);
        }
    })
    .catch((error) => {
        console.error(error);
    });
}

第三步：修复第二页的TextInput展示逻辑 #

现在你从导航参数里拿到的都是字符串了，直接传给TextInput的value即可：

<Block middle style={styles.nameInfo}>
    {/* 拼接firstName和lastName成字符串 */}
    <Text bold size={28} color="#32325D">
        {`${this.props.navigation.getParam("firstName")} ${this.props.navigation.getParam("lastName")}`}
    </Text>
    <Block width={width * 0.8} style={{ marginBottom: 15 }}>
        <Input 
            editable={false} 
            placeholder="Email id" 
            value={this.props.navigation.getParam("email") || ''} {/* 加|| ''避免undefined */}
            style={{marginTop:20, borderRadius:30, borderWidth:3}} 
            iconContent={ 
                <Icon size={16} color={argonTheme.COLORS.ICON} name="nav-right" family="ArgonExtra" style={styles.inputIcons} /> 
            } 
        />
    </Block>
    <Block width={width * 0.8} style={{ marginBottom: 15 }}>
        <Input 
            editable={false} 
            placeholder="Mobile Number" 
            value={this.props.navigation.getParam("mobileno") || ''} 
            style={{borderRadius:30, borderWidth:3}} 
            iconContent={ 
                <Icon size={16} color={argonTheme.COLORS.ICON} name="nav-right" family="ArgonExtra" style={styles.inputIcons} /> 
            } 
        />
    </Block>
    <Block width={width * 0.8} style={{ marginBottom: 15 }}>
        <Input 
            editable={false} 
            placeholder="profession" 
            value={this.props.navigation.getParam("profession") || ''} 
            style={{borderRadius:30, borderWidth:3}} 
            iconContent={ 
                <Icon size={16} color={argonTheme.COLORS.ICON} name="nav-right" family="ArgonExtra" style={styles.inputIcons} /> 
            } 
        />
    </Block>
</Block>

为什么之前会报错？ #

之前你写了const $email = this.state，把整个state对象（{UserMNO: "xxx"}）传给了导航参数EmailId，到第二页时this.props.navigation.getParam("EmailId")拿到的是一个对象，而TextInput的value属性要求是字符串类型，所以就触发了那个prop type错误。

现在经过上面的修改，所有传给TextInput的value都是字符串，后端也正确返回了用户数据，整个流程就能正常运行啦！

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