Php Fetch不向<；文本>；从第1页获取信息后，查询API

这段代码适用于php并返回json数据，在我的浏览器和postman上进行了测试

<?php
$host = 'localhost';
$db_user = 'id15131779_root';
$db_pass = '_8gJ{58#)Jgd\h^{';
$db = 'id15131779_announcements';

$con = mysqli_connect($host, $db_user, $db_pass, $db) or die ('cannot connect, Reason : '.mysqli_error());

$AccountNum = mysqli_real_escape_string($con,$_GET['AccountNum']);
$sql = "select * from bankDetails where AccountNum = '$AccountNum'";
$result = mysqli_query($con,$sql);
$check = mysqli_num_rows($result);

if($check > 0)
{
    $row = mysqli_fetch_assoc($result);
    $Fullname = $row['Fullname'];
    $AccountNum = $row['AccountNum'];
    $email = $row['email'];
    $Telephone = $row['Telephone'];
    $balance = $row['balance'];
}
else
{
    $Fullname = "";
    $AccountNum = "";
    $email = "";
    $Telephone = "";
    $balance = "";
}

    $response[] = array("Fullname"=>$Fullname,"AccountNum"=>$AccountNum, "email"=>$email, "Telephone"=>$Telephone, "balance"=>$balance);
    echo json_encode($response);

?>

虚拟数据，这些数据不是真实的，只是输入到系统中。 现在我有了这段代码，它应该从登录表单（例如，登录表单就是帐号）中获取用户名，然后使用第2页中的相同数据查询API以返回要使用的数据

现在这是我在React native中的登录页面，它应该从中搜索

/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View , Image, TextInput, TouchableOpacity, Alert, Linking} from 'react-native';
import Icon from 'react-native-vector-icons/SimpleLineIcons';

class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {
        user: '',
        password: ''
    };

    DummyLogin = () =>
    {
        alert('I am a Dummy Login!');
        this.props.navigation.navigate('Home',{user: this.state.user});
    }

    FunctionLogin = () =>
    {
        const {user} = this.state;
        const {password} = this.state;
        fetch('https://uncoiled-crust.000webhostapp.com/rest/login.php',{
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                user: user,
                password: password
              })
        }).then((response) =>response.json())
        .then((responseJson) => {
            if(responseJson === 'OK')
            {
                this.props.navigation.navigate('Announcements');
            }
            else
            {
                Alert.alert(responseJson);
            }
        }).catch((error) =>{
            console.error(error);
        });
    }
  }

  render() 
  {
      return (
      <View style={styles.container}>
        <Image source={{uri:'asset:/logo/436146d3-d290-459b-ae8a-bc5b07eacea1_200x200.png'}}
        style={styles.logo} />

        <Text style={{textAlign:'left',fontSize:40,fontWeight:'bold' ,color: '#030303'}}> Sign In</Text>

        <TextInput
            placeholder = " Account Number"
            onChangeText={user => this.setState({user})}
            style={styles.input}
            keyboardType='numeric'
            value={this.state.myNumber}
            maxLength={15} 
        />

        <TextInput
            placeholder = " Passcode"
            onChangeText={password => this.setState({password})}
            style={styles.input}
            secureTextEntry={true} 
            keyboardType='numeric'
            value={this.state.myNumber}
            maxLength={6} 
        />

        <Text style={{color: '#030303', textAlign: 'center', alignSelf:'stretch'}}
        onPress={() => Linking.openURL('http://google.com')}>
        Forgot Password? Reset
        </Text>

        <View style={styles.space} />
        <TouchableOpacity onPress={() => {DummyLogin();}} style={styles.button}>
        <Text style={styles.loginbtn}> Login </Text>
         </TouchableOpacity>
         <View style={styles.space} />
         <TouchableOpacity onPress={() => {DummyLogin();}} style={styles.Regbutton}>
        <Text style={styles.loginbtn2}> Register </Text>
         </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent :"center",
        alignItems:"center"
    },

    input:{
        width:300,
        height:55,
        margin:10,
        fontSize : 15,
        fontWeight : 'bold',
        borderBottomColor:'#030303',
        borderBottomWidth: 1,
        marginBottom: 30,
    },

    button:{
        width:300,
        height: 52,
        padding:10,
        borderRadius:10,
        backgroundColor:'#030303',
        alignItems: 'center'
    },

    Regbutton:{
        width:300,
        height:52,
        padding:10,
        borderRadius:10,
        backgroundColor:'#ffffff',
        alignItems: 'center',
        borderWidth : 2,
        borderColor: '#030303'
    },


    loginbtn:{
        color:'#ffff',
        fontSize : 20,
        fontWeight : 'bold'
    },

    loginbtn2:{
        color:'#030303',
        fontSize : 20,
        fontWeight : 'bold'
    },

    logo:{
    width:150,
    height:150
    },

    space: {
        width: 10, 
        height: 10,
      },

      imageStyle: {
        flexDirection:'row',
        justifyContent:'center',
        padding: 5,
        margin: 2,
        height: 15,
        width: 15,
        resizeMode: 'stretch',
        marginBottom: 8,
        marginTop : 8,
        alignItems: 'center',
      },
});

export default Login;

/*eslint禁用prettier/prettier*/
从“React”导入React，{Component}；
从“react native”导入{平台、样式表、文本、视图、图像、文本输入、TouchableOpacity、警报、链接}；
从“反应本机向量图标/简单图标”导入图标；
类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：“”，
密码：“”
};
DummyLogin=（）=>
{
警报（'我是虚拟登录！'）；
this.props.navigation.navigate（'Home'，{user:this.state.user}）；
}
FunctionLogin=（）=>
{
const{user}=this.state；
const{password}=this.state；
取（'https://uncoiled-crust.000webhostapp.com/rest/login.php',{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
用户:用户,，
密码：密码
})
}).then（（response）=>response.json（））
.然后（（responseJson）=>{
如果（responseJson==='OK'）
{
this.props.navigation.navigate（“公告”）；
}
其他的
{
警惕，警惕（responseJson）；
}
}).catch（（错误）=>{
控制台错误（error）；
});
}
}
render（）
{
返回(
登录
this.setState（{user}）}
style={style.input}
keyboardType='numeric'
值={this.state.myNumber}
maxLength={15}
/>
this.setState（{password}）}
style={style.input}
secureTextEntry={true}
keyboardType='numeric'
值={this.state.myNumber}
maxLength={6}
/>
Linking.openURL（'http://google.com')}>
忘记密码？重置
{DummyLogin（）；}}style={style.button}>
登录
{DummyLogin（）；}}style={styles.Regbutton}>
登记
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”
},
输入：{
宽度：300，
身高：55，
差额：10，
尺寸：15，
fontWeight:'粗体'，
borderBottomColor:“#030303”，
边界宽度：1，
marginBottom:30，
},
按钮：{
宽度：300，
身高：52，
填充：10，
边界半径：10，
背景颜色：“#030303”，
对齐项目：“中心”
},
注册表按钮：{
宽度：300，
身高：52，
填充：10，
边界半径：10，
背景颜色：“#ffffff”，
对齐项目：“居中”，
边界宽度：2，
边框颜色：“#030303”
},
登录名：{
颜色：“#ffff”，
尺寸：20，
fontWeight:“粗体”
},
loginbtn2：{
颜色：“#030303”，
尺寸：20，
fontWeight:“粗体”
},
标志：{
宽度：150，
身高：150
},
空间：{
宽度：10，
身高：10，
},
图像样式：{
flexDirection:“行”，
辩护内容：'中心'，
填充：5，
差额：2，
身高：15，
宽度：15，
resizeMode:'拉伸'，
marginBottom:8，
玛金托普：8，
对齐项目：“居中”，
},
});
导出默认登录；

现在，它应该从API获取信息并填充的页面上有标记，它只是不向它们返回任何内容。我的代码如下所示：

import React, { Component } from 'react';
import { Platform, StyleSheet,Text, View , Image, TextInput, TouchableOpacity, Alert, Linking, Dimensions, FlatList} from 'react-native';

export default class Home extends Component {
  
    constructor(props) {
    super(props);
    this.state = {
      AccountNum : '',
      Fullname : '',
      email : '',
      Telephone : '',
      balance : ''
    };
  }

  onclick_item(key)
  {
      switch(key)
      {
          case "BVN":
             this.props.navigation.navigate('bvn');
              //  const {navigation} = this.props;
              //  const username = navigation.getParam('user','NO-User');
              //  alert('Hello '+username);
              break;
          case "Transfers":
                this.props.navigation.navigate('Transfers');
                break;
          case "Bill Payments":
            this.props.navigation.navigate('BillPayments');
                break;
          case "Checkbook Requests":
                this.props.navigation.navigate('CheckBookRequest');
                break;
          case "Airtime Purchase":
                this.props.navigation.navigate('AirtimePurchase');
                break;
          case "Contact Us":
                this.props.navigation.navigate('Contact');
                break;
      }
  }


  componentDidMount()
  {
    this.getAccountDetails();
  }

  getAccountDetails = () =>
  {
    const {navigation} = this.props;
    const AccountNum = navigation.getParam('user','NO-User');
   var searchAPIURL = 'https://uncoiled-crust.000webhostapp.com/api/searchData.php?AccountNum='+AccountNum;
     var header = {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
     };

     fetch(
         searchAPIURL,
         {
             method : 'GET',
             headers : header
         }
     ).then((response) => response.json())
      .then((responseJson)=> {
          this.setState({Fullname : responseJson.Fullname});
          this.setState({balance: responseJson.balance});
      })
  }

  render() {
      //const {navigation} = this.props;
      //const username = navigation.getParam('user','NO-User');
    return (
      <View>
        <Text style={styles.welcomeText}> Welcome , {this.state.Fullname}!  - 2080440475  </Text>
        <Text style={styles.balanceText}> ₦ {this.state.balance} </Text>
        <View
        style={{
            borderBottomColor: '#696b69',
            borderBottomWidth: 1,
         }}
        />
        <View>
        <Text style={styles.MenuText}> Menu </Text>
        <View style={styles.space} />
            <FlatList
            const data  = {[
                {key : 'BVN'},
                {key: 'Transfers'},
                {key: 'Bill Payments'},
                {key: 'Checkbook Requests'},
                {key: 'Airtime Purchase'},
                {key: 'Contact Us'},
            ]}
            renderItem={({ item }) => (
                <TouchableOpacity onPress={() =>this.onclick_item(item.key)} style={styles.button}>
            <View style ={styles.item}>
                <Text style = {styles.itemText} >{item.key}</Text>
            </View>
                </TouchableOpacity>
              )}
              numColumns = '2'
            />
        </View>
        <View style={styles.space} />
      </View>
    );
  }
}

const styles = StyleSheet.create({

    MenuText :{
        margin : 10,
        fontSize : 27,
        fontFamily : 'Verdana',
        fontWeight : 'bold',
        flexDirection : 'row'
    },

    welcomeText :{
        margin : 10,
        fontSize : 15,
        fontFamily : 'Verdana',
        fontWeight : 'bold',
        flexDirection : 'row'
    },

    space: {
        width: 10, 
        height: 10,
      },

    balanceText:{
        margin : 10,
        fontSize : 25,
        fontFamily : 'Verdana',
        fontWeight : 'bold'
    },
    accountNumText :{
        margin : 10,
        fontSize : 13,
        textAlign : 'right',
        fontFamily : 'Verdana',
        fontWeight : 'bold'
    },
    container:{
        flex :1,
        marginVertical :20
    },
    item : {
        backgroundColor : '#030303',
        borderRadius : 10,
        alignItems: 'center',
        justifyContent : 'center',
        flex : 1,
        margin : 1,
        height : Dimensions.get('window').width / 3
      },
      itemText:{
        color: '#fff'
      },
      button:{
        backgroundColor : '#030303',
        borderRadius : 35,
        alignItems: 'center',
        justifyContent : 'center',
        flex : 1,
        margin : 1,
        height : Dimensions.get('window').width / 3
      }

});

import React，{Component}来自'React'；
从“react native”导入{平台、样式表、文本、视图、图像、文本输入、TouchableOpacity、警报、链接、维度、平面列表}；
导出默认类Home extends组件{
建造师（道具）{
超级（道具）；
此.state={
AccountNum:“”，
全名：“”，
电子邮件：“”，
电话：''，
余额：“”
};
}
onclick_项（键）
{
开关（钥匙）
{
“BVN”案：
this.props.navigation.navigate（'bvn'）；
//const{navigation}=this.props；
//const username=navigation.getParam（'user'，'NO-user'）；
//警报（“你好”+用户名）；
打破
“转让”一案：
this.props.navigation.navigate（'Transfers'）；
打破
“账单支付”案例：
this.props.navigation.navigate（'BillPayments'）；
打破
案例“支票簿请求”：
this.props.navigation.navigate（'CheckBookRequest'）；
打破
案例“广播时间购买”：
this.props.navigation.navigate（'AirtimePurchase'）；
打破
案例“联系我们”：
this.props.navigation.navigate（'Contact'）；
打破
}
}
componentDidMount（）
{
此参数为.getAccountDetails（）；
}
getAccountDetails=（）=>
{
const{navigation}=this.props；
const AccountNum=navigation.getParam（'user'，'NO-user'）；
var searchapirl=https://uncoiled-crust.000webhostapp.com/api/searchData.php?AccountNum=“+AccountNum；
变量头={
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
};
取回(
searchAPIURL，
import React, { Component } from 'react';
import { Platform, StyleSheet,Text, View , Image, TextInput, TouchableOpacity, Alert, Linking, Dimensions, FlatList} from 'react-native';

export default class Home extends Component {
  
    constructor(props) {
    super(props);
    this.state = {
      AccountNum : '',
      Fullname : '',
      email : '',
      Telephone : '',
      balance : ''
    };
  }

  onclick_item(key)
  {
      switch(key)
      {
          case "BVN":
             this.props.navigation.navigate('bvn');
              //  const {navigation} = this.props;
              //  const username = navigation.getParam('user','NO-User');
              //  alert('Hello '+username);
              break;
          case "Transfers":
                this.props.navigation.navigate('Transfers');
                break;
          case "Bill Payments":
            this.props.navigation.navigate('BillPayments');
                break;
          case "Checkbook Requests":
                this.props.navigation.navigate('CheckBookRequest');
                break;
          case "Airtime Purchase":
                this.props.navigation.navigate('AirtimePurchase');
                break;
          case "Contact Us":
                this.props.navigation.navigate('Contact');
                break;
      }
  }


  componentDidMount()
  {
    this.getAccountDetails();
  }

  getAccountDetails = () =>
  {
    const {navigation} = this.props;
    const AccountNum = navigation.getParam('user','NO-User');
   var searchAPIURL = 'https://uncoiled-crust.000webhostapp.com/api/searchData.php?AccountNum='+AccountNum;
     var header = {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
     };

     fetch(
         searchAPIURL,
         {
             method : 'GET',
             headers : header
         }
     ).then((response) => response.json())
      .then((responseJson)=> {
          this.setState({Fullname : responseJson.Fullname});
          this.setState({balance: responseJson.balance});
      })
  }

  render() {
      //const {navigation} = this.props;
      //const username = navigation.getParam('user','NO-User');
    return (
      <View>
        <Text style={styles.welcomeText}> Welcome , {this.state.Fullname}!  - 2080440475  </Text>
        <Text style={styles.balanceText}> ₦ {this.state.balance} </Text>
        <View
        style={{
            borderBottomColor: '#696b69',
            borderBottomWidth: 1,
         }}
        />
        <View>
        <Text style={styles.MenuText}> Menu </Text>
        <View style={styles.space} />
            <FlatList
            const data  = {[
                {key : 'BVN'},
                {key: 'Transfers'},
                {key: 'Bill Payments'},
                {key: 'Checkbook Requests'},
                {key: 'Airtime Purchase'},
                {key: 'Contact Us'},
            ]}
            renderItem={({ item }) => (
                <TouchableOpacity onPress={() =>this.onclick_item(item.key)} style={styles.button}>
            <View style ={styles.item}>
                <Text style = {styles.itemText} >{item.key}</Text>
            </View>
                </TouchableOpacity>
              )}
              numColumns = '2'
            />
        </View>
        <View style={styles.space} />
      </View>
    );
  }
}

const styles = StyleSheet.create({

    MenuText :{
        margin : 10,
        fontSize : 27,
        fontFamily : 'Verdana',
        fontWeight : 'bold',
        flexDirection : 'row'
    },

    welcomeText :{
        margin : 10,
        fontSize : 15,
        fontFamily : 'Verdana',
        fontWeight : 'bold',
        flexDirection : 'row'
    },

    space: {
        width: 10, 
        height: 10,
      },

    balanceText:{
        margin : 10,
        fontSize : 25,
        fontFamily : 'Verdana',
        fontWeight : 'bold'
    },
    accountNumText :{
        margin : 10,
        fontSize : 13,
        textAlign : 'right',
        fontFamily : 'Verdana',
        fontWeight : 'bold'
    },
    container:{
        flex :1,
        marginVertical :20
    },
    item : {
        backgroundColor : '#030303',
        borderRadius : 10,
        alignItems: 'center',
        justifyContent : 'center',
        flex : 1,
        margin : 1,
        height : Dimensions.get('window').width / 3
      },
      itemText:{
        color: '#fff'
      },
      button:{
        backgroundColor : '#030303',
        borderRadius : 35,
        alignItems: 'center',
        justifyContent : 'center',
        flex : 1,
        margin : 1,
        height : Dimensions.get('window').width / 3
      }

});

import React, { Component } from 'react';
import { Platform, StyleSheet,Text, View , Image, TextInput, TouchableOpacity, Alert, Linking, Dimensions, FlatList} from 'react-native';

export default class Home extends Component {
  
    constructor(props) {
    super(props);
    this.state = {
      AccountNum : '',
      Fullname : '',
      email : '',
      Telephone : '',
      balance : ''
    };
  }

  onclick_item(key)
  {
      switch(key)
      {
          case "BVN":
             this.props.navigation.navigate('bvn');
              //const {navigation} = this.props;
             //const username = navigation.getParam('user','NO-User');
              //alert('Hello '+username);
              break;
          case "Transfers":
                this.props.navigation.navigate('Transfers');
                break;
          case "Bill Payments":
            this.props.navigation.navigate('BillPayments');
                break;
          case "Checkbook Requests":
                this.props.navigation.navigate('CheckBookRequest');
                break;
          case "Airtime Purchase":
                this.props.navigation.navigate('AirtimePurchase');
                break;
          case "Contact Us":
                this.props.navigation.navigate('Contact');
                break;
      }
  }


  componentDidMount()
  {
    this.getAccountDetails();
  }

  getAccountDetails = () =>
  {
    const {navigation} = this.props;
    const AccountNum = navigation.getParam('user','NO-User');
   var searchAPIURL = 'https://uncoiled-crust.000webhostapp.com/api/searchData.php?AccountNum='+AccountNum;
     var header = {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
     };

     fetch(
         searchAPIURL,
         {
             method : 'GET',
             headers : header
         }
     ).then((response) => response.json())
      .then((responseJson)=> {
          this.setState({Fullname:responseJson[0].Fullname});
          this.setState({balance:responseJson[0].balance});
          this.setState({AccountNum:responseJson[0].AccountNum});
      })
  }

  render() {
      //const {navigation} = this.props;
      //const username = navigation.getParam('user','NO-User');
    return (
      <View>
        <Text style={styles.welcomeText}> Welcome , {this.state.Fullname}!  - {this.state.AccountNum}  </Text>
        <Text style={styles.balanceText}> ₦ {this.state.balance} </Text>
        <View
        style={{
            borderBottomColor: '#696b69',
            borderBottomWidth: 1,
         }}
        />
        <View>
        <Text style={styles.MenuText}> Menu </Text>
        <View style={styles.space} />
            <FlatList
            const data  = {[
                {key : 'BVN'},
                {key: 'Transfers'},
                {key: 'Bill Payments'},
                {key: 'Checkbook Requests'},
                {key: 'Airtime Purchase'},
                {key: 'Contact Us'},
            ]}
            renderItem={({ item }) => (
                <TouchableOpacity onPress={() =>this.onclick_item(item.key)} style={styles.button}>
            <View style ={styles.item}>
                <Text style = {styles.itemText} >{item.key}</Text>
            </View>
                </TouchableOpacity>
              )}
              numColumns = '2'
            />
        </View>
        <View style={styles.space} />
      </View>
    );
  }
}

const styles = StyleSheet.create({

    MenuText :{
        margin : 10,
        fontSize : 27,
        fontFamily : 'Verdana',
        fontWeight : 'bold',
        flexDirection : 'row'
    },

    welcomeText :{
        margin : 10,
        fontSize : 15,
        fontFamily : 'Verdana',
        fontWeight : 'bold',
        flexDirection : 'row'
    },

    space: {
        width: 10, 
        height: 10,
      },

    balanceText:{
        margin : 10,
        fontSize : 25,
        fontFamily : 'Verdana',
        fontWeight : 'bold'
    },
    accountNumText :{
        margin : 10,
        fontSize : 13,
        textAlign : 'right',
        fontFamily : 'Verdana',
        fontWeight : 'bold'
    },
    container:{
        flex :1,
        marginVertical :20
    },
    item : {
        backgroundColor : '#030303',
        borderRadius : 10,
        alignItems: 'center',
        justifyContent : 'center',
        flex : 1,
        margin : 1,
        height : Dimensions.get('window').width / 3
      },
      itemText:{
        color: '#fff'
      },
      button:{
        backgroundColor : '#030303',
        borderRadius : 35,
        alignItems: 'center',
        justifyContent : 'center',
        flex : 1,
        margin : 1,
        height : Dimensions.get('window').width / 3
      }

});