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

    }
  })
];

我在这里尝试做的是从后端获取对象数组并将其推送到常量productContent并使用它来显示产品。

不幸的是，在.fetch之外，我得到了我不确定该如何解析的诺言，当我在访存内部进行控制台时，我得到了正确的值。

有人知道我该如何正确地解决获取中的承诺或如何从获取功能之外的数据中获取价值？

Answer 1

看起来您走在正确的轨道上，但是尝试将获取逻辑移到数组之外，类似以下替代解决方案：

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

Answer 2

请注意，第6行的push（data）中的[i]部分丢失了

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| ];

从React中的SQL表显示表

2 个答案: