Javascript 在页面加载时将道具传递给子组件-使用next.js进行反应

我是React和Next.js的新手。我正在尝试将道具从一个获取请求传递到我的后端（express server/MySQL数据库）的子组件。返回的数据是json格式的，当前正在打印到我的浏览器窗口。子组件是一个ProductList，其中包含呈现的产品

import fetch from 'isomorphic-unfetch'

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

const Index = () => (

    <div>
        <ProductList products={products}/>
    </div>

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

export default Index;

import-fetch from'isomorphic unfetch'
从“../components/ProductList/ProductList”导入ProductList；
常数索引=（）=>(
)
Index.getInitialProps=异步函数（）{
const res=等待取数（'http://localhost:3000');
const data=wait res.json（）；
返回{产品：数据}
}
出口违约指数；

只需为产品使用一个状态，然后从

useffect

填充它。由于

useffect

只应在第一次渲染时运行，因此我们会将一个空的依赖项数组传递给它。此外，请记住处理提取过程中出现的任何错误

const Index = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        const getProducts = async () => {
            const res = await fetch("http://localhost:3000");
            const data = await res.json();

            setProducts(data);
        };

        getProducts();
    }, []);

    return (
        <div>
            <ProductList products={products} />
        </div>
    );
};

const Index=（）=>{
const[products，setProducts]=useState（[]）；
useffect（（）=>{
const getProducts=async（）=>{
const res=等待获取（“http://localhost:3000");
const data=wait res.json（）；
产品（数据）；
};
getProducts（）；
}, []);
返回(
);
};

有两种方法。一种是针对客户端（react）的解决方案，另一种是针对服务器端（nextjs）

客户端-反应

import {useState, useEffect} from 'react'
import ProductList from '../components/ProductList/ProductList';

const Index = () => {
    const [products, setProducts] = useState()
    
    // This logic is only erxecute when the component is mounted
    useEffect({
        const res = await fetch('http://localhost:3000');
        const data = await res.json();
        setProducts(data)
    }, []);

    return (
        <div>
            <ProductList products={products}/>
        </div>

    )

export default Index;

从'react'导入{useState，useffect}
从“../components/ProductList/ProductList”导入ProductList；
常数索引=（）=>{
const[products，setProducts]=useState（）
//此逻辑仅在安装组件时执行
使用效果({
const res=等待取数（'http://localhost:3000');
const data=wait res.json（）；
setProducts（数据）
}, []);
返回(
)
出口违约指数；

服务器端-NextJS

import fetch from 'isomorphic-unfetch'
import ProductList from '../components/ProductList/ProductList';

const Index = ({products}) => (
    <div>
        <ProductList products={products}/>
    </div>

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

export default Index;

import-fetch from'isomorphic unfetch'
从“../components/ProductList/ProductList”导入ProductList；
常量索引=（{products}）=>(
)
Index.getInitialProps=异步函数（）{
const res=等待取数（'http://localhost:3000');
const data=wait res.json（）；
返回{产品：数据}
}
出口违约指数；

---

当从

getInitialProps

返回一个值时，该值将作为一个道具注入页面组件。这意味着页面组件将这些值作为参数接收。

为Alvaro干杯！这很好。有没有办法使用Next.js的getInitialProps方法呢？@DominicLane不客气。很抱歉，我忽略了您对的使用de>getInitialProps。我建议的解决方案只是一种标准的反应方式。如果你需要使用

getInitialProps

，我无法帮助你，因为我没有这方面的经验。如果是这样的话，让我们看看是否有人能提供更多帮助。没问题，欢迎大家看一看。getInitialProps的用法在Next.js中使用，因为页面是服务器端的如果要路由到“LocalHost:3000”，上面的方法非常有效，但如果您刚开始加载它，则不会。您找到正确的解决方案了吗？我也在为您提到的问题寻找正确的解决方案。@ManirajMurugan我遇到的问题是，我将请求发送到服务器上的同一个端点，作为我希望下一个js到SSR呈现的页面的端点。请参阅关于它的另一篇文章我做的帽子，我们设法解决了它：[link（]）。为重复的帖子道歉，我不知道这还没有完成。如果这有帮助，请告诉我。要解决它，只需将获取请求更改为与页面不同的端点。例如，“谢谢你的回复，我将对此进行研究。”。。