Question

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

Answer 1

只需对产品使用状态，然后从useEffect中填写。由于useEffect仅应在第一个渲染上运行，因此我们向其传递了一个空的依赖项数组。另外，请记住要处理提取中的任何错误。

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

Answer 2

您有2种方法可以做到。一种解决方案是用于客户端（反应），第二种解决方案是用于服务器端（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;

服务器端-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注入到页面组件中。这意味着页面组件将这些值作为参数接收。

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

2 个答案: