最初获取数据并将道具传递给另一个组件 [英] Initially fetch data and pass props to another component
问题描述
老实说(也许让我感到羞愧)，我已经为此困惑了整整一个星期.我从头到尾阅读了Next.js文档，并在网上搜寻了数小时.我显然缺少了一些东西，如果有人可以看一下，我将不胜感激.
I have honestly (and perhaps ashamedly) been flummoxed by this for well over a week now. I've read the Next.js documentation back to front and have scoured the web for hours. I am clearly missing something and would appreciate it if someone could take a look.
当Index.js加载时，它通过express向我的数据库发送一个请求，这将返回一个json响应.目的是让我的ProductList组件将此响应(已通过props传递给它).map()到我的单个产品中.
When Index.js gets loaded, it sends a request to my database (via) express and this returns a json response. The intention is for my ProductList component to .map() this response - which has been passed to it via props - into my individual products.
使用下面的代码，当我最初加载另一个页面然后链接到客户端时，我可以获取index.js来呈现产品.但是，如果我最初加载此页面，则无法使Index.js加载我的产品.
With the below code, I can get my index.js to render the products when I initially load another page and then link to it client side. However, I can't get Index.js to load my products if I initially load this page.
[Json视图] [1] [1]: https://i.stack. imgur.com/3c6hf.png
[Json views][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
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
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}`)
})
})
推荐答案
Hmm ...根据您的server.js，我想说它来自于此.
index.js在哪个文件夹中?它响应哪条路线?最终，它可能在您的路由器代码中.
Hmm... Based on your server.js, I'd say it comes from this.
In which folder is index.js? To which route it responds to ? Eventually, it could be in your routers code.
您是否看到请求已登录到服务器中?您可以将其记录在您的index.js服务器路由内吗?
Do you see the request coming in, logged, in your server? Can you log it inside your index.js server route?
这篇关于最初获取数据并将道具传递给另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
