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

问题描述

一个多星期以来，老实说（也许很惭愧）我已经为此感到困惑。我已经从头到尾阅读了 Next.js 文档，并在网上搜索了几个小时。我显然错过了一些东西，如果有人可以看一下，我将不胜感激。

当 Index.js 被加载时，它会向我的数据库（通过）express 发送一个请求，这会返回一个 json 响应。目的是让我的 ProductList 组件将此响应（已通过道具传递给它） .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;

产品列表.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;

服务器.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}`)
  })
})

标签： javascriptreactjse-commercenext.js

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

问题描述

解决方案

推荐阅读