在页面加载时将道具传递给子组件 - 与 next.js 做出反应

Posted 2023-02-22

【中文标题】在页面加载时将道具传递给子组件 - 与 next.js 做出反应

【英文标题】：Pass props to a child component on page load - react with next.js

【发布时间】：2020-03-12 22:24:48

【问题描述】：

我是 React 和 Next.js 的新手。我正在尝试将道具从获取请求传递给子组件到我的后端（快速服务器/ 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;

【问题讨论】：

您是否找到了正确的解决方案？我也在为您提到的确切问题寻找正确的解决方案..

@ManirajMurugan 我遇到的问题是我将请求发送到服务器上的同一个端点，作为我想要下一个 js 到 s-s-r 渲染的页面的端点。请参阅我制作的另一篇关于它的帖子，我们设法解决了它： [link(]***.com/questions/59002970/…) 。为重复的帖子道歉，我没有意识到这仍然存在。让我知道这是否有帮助。

要解决它，只需将获取请求更改为与页面不同的端点即可。 IE。 "localhost:3000/give-me-a-random-initial-endpoint-to-fetch

感谢您的回复，我会看看这个..

【参考方案1】：

您有两种方法可以做到这一点。一种解决方案用于客户端（react），第二种用于服务器端（nextjs）。

客户端 - React

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;

服务器端 - 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;

当从getInitialProps返回一个值时，这个值作为一个prop注入到页面组件中。这意味着页面组件接收这些值作为参数。

【参考方案2】：

只需为产品使用一个状态并从useEffect 填写它。由于useEffect 应该只在第一次渲染时运行，我们传递给它一个空的依赖数组。另外，请记住处理 fetch 中的任何错误。

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

【讨论】：

干杯阿尔瓦罗！这很好用。有没有办法使用 Next.js 的 getInitialProps 方法来做到这一点？

@DominicLane 欢迎您。抱歉，我忽略了您对getInitialProps 的使用。我提出的解决方案只是一种标准的 React 方式。如果您需要使用getInitialProps，我无法帮助您，因为我没有这方面的经验。如果是这样，让我们​​看看是否有人可以提供更多帮助。

没问题 - 为看一看而欢呼。在 Next.js 中使用 getInitialProps，因为页面是在服务器端呈现的。如果您要路由到“LocalHost:3000”，上述方法效果很好，但如果您最初加载它，则效果不佳。