Question

老实说（也许很as愧），我对此感到迷惑了一个多星期。我从头到尾阅读了Next.js文档，并在网上搜寻了数小时。我显然缺少了一些东西，如果有人可以看一下，我将不胜感激。

当Index.js加载时，它通过express向我的数据库发送一个请求，这将返回一个json响应。目的是让我的ProductList组件将此响应（已通过props传递给该响应）.map（）到我的单个产品中。

使用以下代码，当我最初加载另一个页面然后链接到客户端时，我可以获取index.js来呈现产品。但是，如果我最初加载此页面，则无法让Index.js加载产品。

[Json视图] [1] [1]：https://i.stack.imgur.com/3c6hf.png

index.js

import React from 'react'
import NavBar from '../components/Navbar/Navbar';
import fetch from 'isomorphic-unfetch';

import '../styles/styles.css';

import ProductList from '../components/ProductList/ProductList';

const Index = (props) => {

    return (
        <div>
            <NavBar />
            <h1>Products</h1>
            <ProductList products={props.products} />

        </div>
    );
};

Index.getInitialProps = async () => {

    const res = await fetch('http://localhost:3000/');
    const data = await res.json()
    return {products: data}

}

export default Index;

ProductList.js

import ProductTile from '../ProductTile/ProductTile';

class ProductList extends React.Component {
    render(){
        return(
            <div className = "md:flex">

            {
                this.props.products.map(product => {
                    return (
                    <Link href={`/product?product_ID=${product.product_ID}`}>
                    <a><ProductTile product = {product} key={product.product_ID}/></a>
                    </Link>
                )})

            }

            </div>
        )
    }
}

export default ProductList;

server.js

const express = require('express');
const next = require('next');

require('dotenv').config()

const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const cors = require('cors');
const bodyParser = require('body-parser');
const morgan = require('morgan');

const pool = require('../lib/db');

//routers
const productsRouter = require('./routes/products');
const usersRouter = require('./routes/users');


app.prepare().then(() => {
  const server = express()
  server.use(cors());
  server.use(morgan('dev'));
  server.use(bodyParser.json());

  server.get('/', (req, res, next) => {
    pool.query('SELECT * FROM products', function (error, results, fields) {
      if (error) throw error;
      //console.log(results);
      res.send(results);
    });
  })

/* Routers for product router and user router here

*/

  server.use((err, req, res, next) => {
    if (!err.status) {
      err.status = 500;
    }
    res.status(err.status).send(err.message);
  });

  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

Answer 1

嗯...根据您的df.to_csv(path,index=False)，我想说这是从这个来的。 server.js在哪个文件夹中？它响应哪条路线？最终，它可能在您的路由器代码中。

您看到请求已登录到服务器中吗？您可以将其记录在index.js服务器路由中吗？

最初获取数据并将道具传递给另一个组件

1 个答案: