在 react native 的 TextInput 中获取 json 数据

Question

我只是一个初学者，所以请帮助我！

我想在反应原生 TextInput 中获得 JSON 响应。 [我在本机应用程序中有 2 页。 在第一页上 ==> 我想要那个 JSON 数据并使用那个 JSON 响应导航到第二页。

我使用 PHP 作为服务器端脚本语言。 我的 PHP 代码是：

<?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);

// Populate column from JSON $obj array and store into $coulmn.
$firstname = $obj['firstname'];
$lastname = $obj['lastname'];
//$mobileno = $obj['mobileno'];
$email = $obj['email'];
$profession = $obj['profession'];
$mobileno = '7874853188';
//Applying User Login query with mobile number match.
$Sql_Query = "select firstname,lastname,email,profession from member where mobileno = '$mobileno' ";

// Executing SQL Query.
$check = mysqli_fetch_array(mysqli_query($con,$Sql_Query));

if(isset($check)){


 $SuccessLoginMsg = 'Data Matched';

 // Converting the message into JSON format.
$SuccessLoginJson = json_encode($SuccessLoginMsg);

 $first_name = $check[0];
 $last_name = $check[1];
 $email = $check[2];
 $profession = $check[3];

// Echo the message.
 echo $SuccessLoginJson ; 
 }

 else{

 // If the record inserted successfully then show the message.
$InvalidMSG = 'Enter valid phone number' ;

// Converting the message into JSON format.
$InvalidMSGJSon = json_encode($InvalidMSG);

// Echo the message.
 echo $InvalidMSGJSon ;

 }

 mysqli_close($con);
?>

以上代码 100% 正确。 [在网页上测试]

在我的 react 本机代码中，首先我检查手机号码 => 如果手机号码正确[存在于数据库中]，那么该用户可以使用该 JSON 响应转到下一页。

[回复包含 4 个字段 = 名字、姓氏、电子邮件、回复] 我在 react native 中的 JSON 实现是：

constructor(props) { 
    super(props) 
    this.state = {

    UserMNO: ''
    } 
  }

  UserLoginFunction = () =>{

 const { UserMNO } = this.state;
 const {firstname} = this.state;
 const {lastname} = this.state;
 const {email} = this.state;
 const {profession} =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);
        // If server response message same as Data Matched
       if(responseJson === 'Data Matched')
        {   

            //Then open Profile activity and send user email to profile activity.
            this.refs.toast.show('Login successful', 500, () => {
            const { navigation } = this.props;

            const  $firstname   = this.state ;
            const $lastname   = this.state ;
            const  $email   = this.state ;
            const  $profession   = this.state ;
            const { UserMNO }  = this.state ;

            navigation.navigate("Profile",
              {EmailId: $email,
              Name: $firstname+$lastname,
              Profe : $profession,
              mobileno : UserMNO,
              });
    });
        }
        else{

          Alert.alert(responseJson);
        }

      }).catch((error) => {
        console.error(error);
      });

  }

我在这里输入我的手机号码：

我的第二个屏幕 [个人资料]- 我想要 JSON 响应的地方

第二屏的基本代码[配置文件]

<Block middle style={styles.nameInfo}>
                    <Text bold size={28} color="#32325D">
                        {this.props.navigation.getParam("Name")}
                    </Text>
                    <Block width={width * 0.8} style={{ marginBottom: 15 }}>
                      <Input
                        editable = {false}
                        placeholder="Email id"
                        value={this.props.navigation.getParam("EmailId")}
                        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("Profe")}
                        style={{borderRadius:30, borderWidth:3}}
                        iconContent={
                          <Icon
                            size={16}
                            color={argonTheme.COLORS.ICON}
                            name="nav-right"
                            family="ArgonExtra"
                            style={styles.inputIcons}
                          />
                        }
                      />
                    </Block>

                  </Block>

错误提示：

失败的道具类型：提供给“TextInput”的“对象”类型的无效道具“值”，应为“字符串”。

Answer 1

您收到的某些数据似乎不是string value。 您只能为 Textinput 设置string value。检查接收到的数据的值，确保数据为string.

如果你只是想摆脱错误，

navigation.navigate("Profile",
              {EmailId: JSON.stringify($email),
              Name: JSON.stringify($firstname+$lastname),
              Profe : JSON.stringify($profession),
              mobileno : JSON.stringify(UserMNO),
              });

Answer 2

您没有正确存储在 this.state 中收到的信息

你must call setState()来存储信息，然后将其值与this.state.xxx一起使用

使用 this.setState() 存储后：

this.setState({profe: YOUR_VALUE})

你应该修改这个：

value={this.state.profe}