javascript - Pass props to a child component on page load - react with next.js - Stack Overflow

admin管理员组

文章数量:1315823

I'm new to React and Next.js. I'm trying to pass down props to a child ponent from a fetch request to my backend (express server / MySQL database. The returned data is in json format and is currently being printed to my browser window. The child ponent is a ProductList, which contains the rendered Products.

import fetch from 'isomorphic-unfetch'

import ProductList from '../ponents/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;

I'm new to React and Next.js. I'm trying to pass down props to a child ponent from a fetch request to my backend (express server / MySQL database. The returned data is in json format and is currently being printed to my browser window. The child ponent is a ProductList, which contains the rendered Products.

import fetch from 'isomorphic-unfetch'

import ProductList from '../ponents/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;

• javascript
• json
• reactjs
• next.js

Share Improve this question Follow asked Nov 17, 2019 at 10:23 AgileDomAgileDom 5111 gold badge11 silver badge99 bronze badges 4

• Did you get the right solution for it? I am also looking for the right solution for exact question you have mentioned.. – Maniraj Murugan Commented Jan 9, 2020 at 11:02
• @ManirajMurugan The problem I had was I was sending my request to the same endpoint on my server, as the endpoint for the page I wanted next js to SSR render. See this other post about it that I made, where we managed to get it solved: [link(]stackoverflow./questions/59002970/…) . Apologies for duplicate posts, I didn't realise this was still up. Let me know if this helps. – AgileDom Commented Jan 9, 2020 at 19:31
• To solve it, just change the fetch request to an endpoint that is different to the pages. I.e. "localhost:3000/give-me-a-random-initial-endpoint-to-fetch – AgileDom Commented Jan 9, 2020 at 19:36
• Thanks for your reply I will take a look into this.. – Maniraj Murugan Commented Jan 10, 2020 at 2:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You have 2 ways to do it. One solution is for client-side (react) and the second one is for server-side (nextjs).

Client side - React

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

const Index = () => {
    const [products, setProducts] = useState()
    
    // This logic is only executed when the ponent 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;

Server side - NextJS

import fetch from 'isomorphic-unfetch'
import ProductList from '../ponents/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;

When a value is returned from getInitialProps, it is injected as a prop into the page ponent, the page ponent then receives those values as parameters.

Simply use a state for the products and fill it from useEffect. As the useEffect should only run on the first render, we pass it an empty array of dependencies. Also, remember to handle any error from the 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>
    );
};

本文标签： javascriptPass props to a child component on page loadreact with nextjsStack Overflow