React Native-无法单击就无法呈现来自后端api的响应

时间:2019-04-22 05:34:12

标签: reactjs native

我有一个后端API,该后端API调用时,返回JSON,并将数据(甚至5条记录,每条最多2列)存储到React Native APP内部的状态变量中,该状态变量需要在APP屏幕上呈现。但是不知何故,它不是在模拟器中没有单击即可进行渲染,否则要花费10秒钟以上的时间来渲染。

NodeJS-API

app.post('/getInvoicesWithoutToken', function (req, res) {
    var obj = req.body;
    let response = {};
    console.log("/getInvoicesWithoutToken"+new Date());
      let sql = "select * from invoices order by invoiceDate desc";
      console.log(sql);
      db.query(sql, function (err, row) {
        if(row) {
          response.code = "S";
          response.alert = "OFF";
          response.alertMessage = "SUCCESS";
          response.data = row;
          res.json(response);
        }
        else {
          response.code = "E";
          response.alert = "ON";
          response.alertMessage = "Error - Unable to find your invoices. Please try again";
          response.data = "";
          res.json(response);
        }
    });
  });

React Native-backend.js

export const getInvoicesWithoutToken = (obj) => {
  const URL = customData.apiURL+"/getInvoicesWithoutToken";
  return fetch(URL, {
   method: 'POST',
   headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json',
   },
   body: JSON.stringify(obj),
 })
 .then((res) => res.json())
 .catch((error) => {
   console.error(error);
 });
}

React Native-屏幕代码

_getInvoicesWithoutToken = async () => {
    const obj = {};
    getInvoicesWithoutToken(obj)
    .then(response => {
      if(response.code === "S") {
  this.setState({ 
              showSpinner: false, 
              allInvoices : response.data
            });
      }  
    })
}

render() {
   let dataReceived = []; 
    dataReceived = this.state.allInvoices;
     let spinner = <Text></Text>;
    if(this.state.showSpinner)
    {
      spinner = <View style={{alignItems: 'center',justifyContent: 'center'}}><Spinner color='blue' /><Text>Searching for invoices...</Text></View>
    }

    return (
      <Container style={styles.container}>
        <Content>
        {spinner}
        <View>
            {
                dataReceived.map((item, i) => {
                  return (
                    <View key={i} style={{padding:10,}}>
                      <Text style={styles.title}>
                        {item.customerName}
                      </Text>
                      <Text style={styles.subTitle}>
                        {item.invoiceDate}
                      </Text>
                    </View>
                )
                })
            }
        </View>
        </Content>
      </Container>
    );
  }

0 个答案:

没有答案