React Native - Invariant Violation：对象作为 React Child 无效（使用 Node JS 作为后端）答案

【问题标题】：React Native - Invariant Violation: Objects are not valid as a React Child (Using Node JS for backend)React Native - Invariant Violation：对象作为 React Child 无效（使用 Node JS 作为后端）
【发布时间】：2018-09-15 17:08:26
【问题描述】：

在这里，我试图获得订单总和以及我使用 Node JS 作为后端的数量总和。问题是每当我运行我的代码时——我的 fetch 函数似乎无法正常工作，或者我遗漏了一些我不知道的东西。

但是使用邮递员，我的 API 正在处理预期的输出。如果我在我的 react-native 代码中使用它，它会显示一些错误。

这是我的后端代码：

OrderNo.js (models) //后端

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

OrderNo.js (router) //后端

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>
        )
    }
}

这是我的数据库

**PS：**我还在每个 fetch 函数上尝试了“json[0].order_no”，没有错误，但我的输出是空的。

【问题讨论】：

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

【解决方案1】：

根据您在Postman 中的响应对象，您需要执行以下操作

this.state = {
        orderDet: this.props.navigation.state.params.orderDet,
        numOrder: null,
        TotalSum: null,
};

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[0].TotalAmountOrdered })
    }

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[0].TotalItemsOrdered })
    }

【讨论】：

有效！谢谢先生，所以应该写的是别名，对吗？为什么？
没关系，你只需要注意不要在反应中直接渲染对象，只是值。如果有数组，则使用map函数等等。查看示例了解更多。

【解决方案2】：

该错误意味着您不能将对象或数组作为子组件，即<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 的值设置为一个数组

【讨论】：