Отображение таблицы из таблицы SQL в React
Я пытался настроить серверную часть веб-сайта, но у меня возникла проблема при попытке прочитать его во внешнем интерфейсе, где я использую React.
Настраивать:
- У меня есть таблица продуктов, которые содержат свойства (имя, цена, isBestSeller, isAvailable и т. д.).
- Я читаю эту таблицу и отправляю данные во внешний интерфейс с помощью NodeJS, как показано в приведенном ниже коде:
`
const bodyParser = require('body-parser');
const express = require('express');
const cors = require('cors');
const fs = require('fs');
const knex = require('knex')
const database = knex({
client: 'pg',
connection: {
host : '127.0.0.1',
user : 'username',
password : '',
database : 'databasename'
}
});
const app = express();
app.use(cors());
app.use(bodyParser.json());
database.select('*').from('products').then(data => {
app.get('/', (req, res) => {
res.send(JSON.stringify(data));
});
});
app.listen(3001);
`
Это отлично работает, и если я вывожу его в console.info, я получаю правильные данные. Проблема появляется во внешнем интерфейсе, так как я еще не знаком с выборкой и обещаниями.
Прежде чем я представил бэкэнд, я читал продукты из простого файла .js, который содержал массив таких объектов:
export const productsContent = [
{
boxImage: 'https://i.imgur.com/dn9ty6l.png',
boxTitle: 'Arabusta Arabica',
boxPrice: '€15',
discountPrice: '€9.99',
bestSeller: false,
available: false,
description: 'Coming soon'
},
...
]
Теперь я заменил приведенный выше код следующим:
export const productsContent = [
fetch('http://localhost:3001')
.then(function(response) { return response.json(); })
.then(function(data) {
for (let i = 0; i < data.length; i++) {
productsContentArray.push(data);
}
})
];
Здесь я пытаюсь получить массив объектов из бэкэнда, передать его в постоянный контент продуктов и использовать его для отображения продуктов.
К сожалению, за пределами .fetch я получаю обещание, которое я не знаю, как анализировать, и когда я консолью внутри выборки, я получаю правильные значения.
Кто-нибудь знает, как я могу правильно разрешить обещание из выборки или как получить значение из данных вне функции выборки?
Ответы 2
Похоже, вы на правильном пути, но попробуйте перенести логику выборки за пределы массива, например, это альтернативное решение:
const Products = {
getContent() {
return fetch(`http://localhost:3001/`, {
headers: {
// header info here
// e.g.
// "Content-type": "application/json",
}
}).then(res => {
return res.json();
}).then(jsonResponse => {
return jsonResponse;
});
}
}
export default Products;
Затем в вашем интерфейсе вы можете сделать что-то вроде следующего:
// other imports
import Products from "./Products";
// do other things
const getProductResponse = Products.getContent();
// handle productResponse status code
console.info(getProductResponse);
// do things with your data
Обратите внимание, что часть [i] в push(data) в строке 6 отсутствовала.
1| export const productsContent = [
2| fetch('http://localhost:3001')
3| .then(function(response) { return response.json(); })
4| .then(function(data) {
5| for (let i = 0; i < data.length; i++) {
6| productsContentArray.push(data[i]);
7| }
8| })
9| ];
К сожалению,
Products.getContent()по-прежнему возвращает Обещать, как и мой код.