Difficulties with useEffect and asyncawait-CodePudding

I've read several questions here regarding my current difficulty; they also told me the way I was coding it was wrong, and I changed it. However, even after changing I still can't seem to get the proper result.

I'm trying to make a small React HTTP Request app for learning purposes. According to the classes I've been following, I managed to create the json server, setup to watch for the DB.json properly, etc. Now, inside the App.js I'm trying to make the async\await call for listing the products in the console.

First, I had the following error:

"Effect callbacks are synchronous to prevent race conditions. Put the async function inside:"

I fixed it by changing my code. It was triggering a warning and I found out the classes I've been following are a bit outdate. No problem. However, even after changing it I can't view the products I create on db.json. If I go to localhost:3000/products it shows up there (which means things are working).

I believe I'm doing it the right way now, but I still can't seem to figure out why I can't view the data.

Any input is appreciated. Thanks!
ps: I'm just starting with react.

App.Js

import './App.css';
import { useState, useEffect } from "react";

const url="http:/localhost:3000/products";

function App() {

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

useEffect(() => {

  const fetchData = async () => {
    const data = await fetch(url);
    console.log("Data:"   data)
    const res = await data.json();
    console.log("Res:"   res)
    setProducts(res);
  }
  fetchData();  
}, []);

console.log(products);

 
  return (
    <div className="App">
    <h1>LIsta de produtos</h1>
    </div>
  );
}

export default App;

CodePudding user response：

The URL you put is missing a "/", Check if the URL is right, rest else seems to be correct, the code below should work.

import "./App.css";
import { useState, useEffect } from "react";

// URL is probably wrong, this is fixed URL
const url = "http://localhost:3000/products";

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await fetch(url);
      console.log("Data:"   data);
      const res = await data.json();
      console.log("Res:"   res);
      setProducts(res);
    };
    fetchData();
  }, []);

  console.log(products);

  return (
    <div className="App">
      <h1>LIsta de produtos</h1>
    </div>
  );
}

export default App;