C#•3w ago

✅ Fetching data (JSON text) from backend C# to React, doesn't work!

Hi I need help with fetching data from a backend. I'm using C# (must language for my degree course). Now, I was following a YouTube video which used a pseudo-backend website to fetch the JSON from there, and it worked for me. Now when I'm trying to fetch my backend data, I think I don't get errors, but it shows a blank screen. Why? The backend JSON exists and works, when I enter the path (port 7278), I see the json text on the screen, which means the HTTP GET function works. When I enter the frontend path (port 3000) it also shows me. But when I start my program, it doesn't show any JSON, just a blank screen (first picture). This is the basic code in React:

  import { useEffect, useState } from "react";
import React from 'react'

const FetchExample = () => {


  const [error, setError] = useState(null);
  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [page, setPage] = useState(0);

  useEffect(() =>{
    const fetchPosts = async () => {
      setIsLoading(true);

      try{
        const response = await fetch('/api/CoffeeShop/Get/GoogleApiShops/'); // => Gets a response from the server\API: BASE_URL
        const posts = await response.json(); // => We convert the response to JSON which we can actually use.
        setPosts(posts);
      }
      catch(error){
        setError(error);
      }
      finally{
        setIsLoading(false);
      }
    }
    fetchPosts();
  }, []);
  
  if(isLoading){
    return <div>Is Loading...</div>;
  }

  if(error){
    return <div>Something went wrong, please try again.</div>
  }

  return (
     <div className='tutorial'>
      <h1 className="mb-4 text-2xl">Data Fetching in React</h1>
      <button onClick={() => setPage(page + 1)}>Increase Page ({page})</button>
      <ul>
        {posts.map((post) => {
          return <li key={post.id}>{post.title}</li>
        })}
      </ul>
    </div>
  )
}

export default FetchExample

  import { useEffect, useState } from "react";
import React from 'react'

const FetchExample = () => {


  const [error, setError] = useState(null);
  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [page, setPage] = useState(0);

  useEffect(() =>{
    const fetchPosts = async () => {
      setIsLoading(true);

      try{
        const response = await fetch('/api/CoffeeShop/Get/GoogleApiShops/'); // => Gets a response from the server\API: BASE_URL
        const posts = await response.json(); // => We convert the response to JSON which we can actually use.
        setPosts(posts);
      }
      catch(error){
        setError(error);
      }
      finally{
        setIsLoading(false);
      }
    }
    fetchPosts();
  }, []);
  
  if(isLoading){
    return <div>Is Loading...</div>;
  }

  if(error){
    return <div>Something went wrong, please try again.</div>
  }

  return (
     <div className='tutorial'>
      <h1 className="mb-4 text-2xl">Data Fetching in React</h1>
      <button onClick={() => setPage(page + 1)}>Increase Page ({page})</button>
      <ul>
        {posts.map((post) => {
          return <li key={post.id}>{post.title}</li>
        })}
      </ul>
    </div>
  )
}

export default FetchExample

1 Reply

canton7•3w ago

Your "cs" looks rather grey...

Gaming

Programming

✅ Fetching data (JSON text) from backend C# to React, doesn't work!

Did you find this page helpful?