React Native - инвариантное нарушение: объекты недействительны в качестве дочерних элементов React (с использованием Node JS для бэкэнда)

здесь я пытаюсь получить сумму заказов и сумму их количества, в которой я использую Узел JS для своего бэкэнда. Проблема в том, что всякий раз, когда я запускаю свой код, мои функции выборки не работают должным образом или мне не хватает чего-то, о чем я не знаю.

Но с помощью почтальона мой API работает с ожидаемым результатом. Но, если я использую его в своем коде, ориентированном на реакцию, он показывает некоторые ошибки.

React Native - инвариантное нарушение: объекты недействительны в качестве дочерних элементов React (с использованием Node JS для бэкэнда)React Native - инвариантное нарушение: объекты недействительны в качестве дочерних элементов React (с использованием Node JS для бэкэнда)

Вот мой код для бэкэнда:

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 (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 (router) // Бэкэнд

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

React Native - инвариантное нарушение: объекты недействительны в качестве дочерних элементов React (с использованием Node JS для бэкэнда)React Native - инвариантное нарушение: объекты недействительны в качестве дочерних элементов React (с использованием Node JS для бэкэнда)

А вот и моя БД

** PS: ** Я также пробовал "json [0] .order_no" для каждой из моих функций выборки, и ошибок не было, но мой вывод пуст.

React Native - инвариантное нарушение: объекты недействительны в качестве дочерних элементов React (с использованием Node JS для бэкэнда)

React Native - инвариантное нарушение: объекты недействительны в качестве дочерних элементов React (с использованием Node JS для бэкэнда)

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
51
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Основываясь на вашем объекте ответа в 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 })
    }

Оно работает! спасибо, сэр, так что это псевдоним, который нужно написать, не так ли? Почему?

Purple Violet 15.09.2018 19:24

Неважно, вам просто нужно позаботиться о том, чтобы не отображать объекты непосредственно в реакции, а только значения. Если есть массив, используйте функцию map и т. д. Посмотрите примеры, чтобы узнать больше.

Pritish Vaidya 15.09.2018 19:26

Ошибка означает, что у вас не может быть объекта или массива в качестве дочернего компонента, то есть <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 в виде массива

Другие вопросы по теме