Error Getting Data from API using FetchData

Question

i am using a react hook : useEffect for getting data from an API and i'm also using .map for rendering an array of product.

after run the npm , there is an error :

xhr.js:178 GET http://localhost:3000/api/products 404 (Not Found)

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios'

function HomeScreen (props) {

    // menggunakan hooks
    const [products, setProduct] = useState([]);

    // fetchDate from server // sama dengan component did mount
    useEffect( () =>{
        const fetchData = async () => {
            const { data } = await axios.get("/api/products");
            setProduct(data)
        }

        return () => {
        fetchData();
        }
    }, [])
    return(
        <div>
            <ul className="products">
                {
                    products.map( product => 
                        <li key={product.id}>
                            <div className="product"  >
                                <Link to = {`/product/${ product.id }`}>
                                    <img className='product-image' src={ product.image } alt={product.name} />
                                </Link>
                                <div className="product-name">
                                    <Link to = {`/product/${ product.id }`}>{ product.name }</Link> 
                                </div>
                                <div className="product-cat">{ product.brand }</div>
                                <div className="product-price"><b>IDR</b> { product.price }</div>
                                <div className="product-rating">{ product.rating } Stars ( { product.reviews } Reviews )</div>
                            </div>
                        </li>
                    )  
                }
                
            </ul>
        </div>
    )
}

export default HomeScreen

and there is code from server.js

const express = require('express');
const data = require('./database/data')

const app = express();


app.get('/api/products', ( req, res) => {
    res.send(data.Products)
})

const PORT = process.env.PORT || 5001

app.listen(PORT, () => {
    console.log(`Server is Running on http://localhost:${PORT}`)
} )

i really hope this problem solving of this code, thank you

Yoandry Collazo · Accepted Answer · 2020-06-25 03:11:28Z

2

You are calling your API on localhost:3000, but your API should be running on localhost:5001

 const { data } = await axios.get("http://localhost:5001/api/products");

answered Jun 25, 2020 at 3:11

Yoandry Collazo

1,22212 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tri putra Over a year ago

thank you of the questions. and this code, i forgot to set the proxy server of package.json ckck

Hyetigran · Accepted Answer · 2020-06-25 02:27:37Z

0

You want to initialize your state with brackets "[]" instead of "{}"

const [products, setProducts] = useState([])

Also, you might want to code defensively by adding a turnery operation to check to see if products is 'truthy' if it's not, then the user will see some kind of error message i.e. the part after the ":".

{products ? products.map( product => {}) : <div>handle error</div> }

answered Jun 25, 2020 at 2:27

Hyetigran

1,2253 gold badges15 silver badges32 bronze badges

1 Comment

tri putra Over a year ago

i've tried change "{}" to "[]" and still error : GET localhost:3000/api/products 404 (Not Found)

tri putra · Accepted Answer · 2020-06-25 03:17:00Z

0

finally i've got this solve

i miss the set proxy server of the front end site, thanks !

answered Jun 25, 2020 at 3:17

tri putra

52 bronze badges

Comments

Birender Pathania · Accepted Answer · 2020-06-25 03:28:00Z

0

Just you need to do is install cors by using below command:

   npm install core

   //Then use it in server file like this: 
   var cors = require('cors')
   app.use(cors())

answered Jun 25, 2020 at 3:28

Birender Pathania

4943 silver badges8 bronze badges

Collectives™ on Stack Overflow

Error Getting Data from API using FetchData

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related