Показать таблицу из таблицы SQL в React

Question

Я пытался настроить серверную часть веб-сайта, но у меня возникла проблема при попытке прочитать его на веб-интерфейсе, где я использую 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.log, я получу нужные данные Проблема появляется во внешнем интерфейсе, поскольку я еще не знаком с извлечением информации и обещаниями.

До того, как я представил бэкэнд, я читал продукты из простого файла .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);

    }
  })
];

То, что я пытаюсь сделать здесь, это извлечь массив объектов из бэкэнда и передать его в постоянный productsContent и использовать его для отображения продуктов.

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

Кто-нибудь знает, как правильно разрешить обещание из выборки или как получить значение из данных вне функции выборки?

Answer 1

Обратите внимание, что часть [i] в ​​push (данные) в строке 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| ];

Answer 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.log(getProductResponse);
// do things with your data