React Native-不变违规:对象作为React Child无效(使用Node JS作为后端)

时间:2018-09-15 17:08:26

标签: javascript android node.js reactjs react-native

在这里,我尝试使用后端 Node JS 的订单总和及其数量的总和。问题是,每当我运行我的代码时-我的提取函数似乎无法正常运行,或者我丢失了一些我不知道的东西。

但是使用邮递员,我的API正在处理预期的输出。 Buuut(如果我在我的本机代码中使用它)会显示一些错误。

Sum using postman Quantity using postman

这是我的后端代码:

OrderNo.js(模型)//后端

var Task = {
    Sum:function(id,callback) {
        return db.query("SELECT SUM(order_amount) AS TotalAmountOrdered FROM orders where order_no=?",[id],callback);
    },
}

OrderNo.js(路由器)//后端

var Task = require('../models/OrderNo');
router.get('/ForSum/:id?', (req, res, next) => {
    Task.Sum(req.params.id,function(err,rows) {
        if(err) {
            res.json(err);
        }
        else {
            res.json(rows);
        }
    });
});

NumOrder.js(模型)//后端

var Task = {
    NumOrder:function(id,callback) {
        return db.query("SELECT SUM(order_quantity) AS TotalItemsOrdered FROM orders where order_no=?",[id],callback);
    },
}

NumOrder.js(路由器)//后端

var Task = require('../models/NumOrder');
router.get('/num/:id?', (req, res, next) => {
    Task.NumOrder(req.params.id,function(err,rows) {
        if(err) {
            res.json(err);
        }
        else {
            res.json(rows);
        }
    });
});

这是我的React-Native代码

export default class Settlement extends Component {
    constructor(props){
    super(props)
        this.state = {
            orderDet: this.props.navigation.state.params.orderDet,
            numOrder: [],
            TotalSum: [],
        };
    }
    fetchSum = async () => {
        const response = await fetch("http://192.168.254.104:3308/OrderNo/ForSum/" + this.state.orderDet)
        const json = await response.json()
        this.setState({ TotalSum: json })
    }
    fetchNumOrders = async () => {
        const response = await fetch("http://192.168.254.104:3308/NumOrder/num/" + this.state.orderDet )
        const json = await response.json()
        this.setState({ numOrder: json })
    }
    componentDidMount() {
        this.fetchNumOrders();
        this.fetchSum();
    }
    render() {
        return (
            <View>
                <Text>Number of Orders: { this.state.numOrder }</Text>
                <Text>Total Amount: ₱{ this.state.TotalSum }</Text>
            </View>
        )
    }
}

This is the error for Sum This is the error for Quantity

这是我的数据库

** PS:**我还在每个提取函数上尝试了“ json [0] .order_no”,没有错误,但我的输出为空。

enter image description here

DB

2 个答案:

答案 0 :(得分:0)

基于<div id="app"> <div class="main"> <div class="top">TOP</div> <div class="left">LEFT</div> <div class="right">RIGHT</div> </div> </div>中的响应对象,您需要执行以下操作

Postman

答案 1 :(得分:0)

该错误表示您不能将对象或数组作为组件的子元素,即<Text>。您只能在组件内部显示字符串或数字。

<Text>Number of Orders: { this.state.numOrder[0].TotalAmountOrdered }</Text>// Inside {} value of variable should be string or number not array or object

错误是您正在设置this.state.numOrder数组的值