ReactJs/JavaScript fetch response returning undefined

Without testing, shouldn't it be reponse.status in the status check? E.g.

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

function App() {
    const [datat, setDatat] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const fetchActionHandler = useCallback(async () => {
        setIsLoading(true);
        setError(null);
        fetch('http://local_server:8889/t.js', { mode: 'no-cors' })
            .then(response => {
                if (!response.ok) {
                    console.log(response.status);
                    throw new Error('Something went wrong!');
                }

                setDatat(response);
            })
            .catch(error => {
                console.error('Error:', error);
                setError(error.message);
            }).
            finally(() => {
                setIsLoading(false);
            });
    }, []);
/..}

export default App;

Select allOpen in new window

Hi,

Thanks for your answer ,
I run the above code and it gave me 0 in the console.log instead of undefined, everything else is the same

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

function App() {
  const [datat, setDatat] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchActionHandler = useCallback(async () => {
    setIsLoading(true);
    setError(null);
//--

fetch('http://local_server:8889/t.js', { mode: 'no-cors' })
  .then(response => {
      if (!response.ok) {
          console.log(response.status);
          throw new Error('Something went wrong!');
      }

      setDatat(response);
  })
  .catch(error => {
      console.error('Error:', error);
      setError(error.message);
  })
  .finally(() => {
      setIsLoading(false);
  });
}, []);

//--
  useEffect(() => {
    fetchActionHandler();
  }, [fetchActionHandler]);

 

  let content = <p>Found no Data.</p>;

  if (datat.length>0) {

    content =  datat;
  }

  if (error) {
    content = <p>{error}</p>;
  }

  if (isLoading) {
    content = <p>Loading...</p>;
  }

  return (
    <React.Fragment>
      <section>
        <button onClick={fetchActionHandler}>Fetch Action Data</button>
      </section>
      <section>{content}</section>
    </React.Fragment>
  );
}

export default App;

Select allOpen in new window

Hey there,

Remember that fetch returns a promise, so you need to access the data via that promise (json() or text() depending on what you need). Accessing the data returns another promise, so you chain them together:

fetch('http://local_server:8889/t.js', { mode: 'no-cors' })
  .then(response => response.text())
  .then(data => {
    // deal with the data that the server sent back
    console.log(data)
    setDatat(response)
  })
  .catch(error => {
    // handle your failures here
      setError(error.message)
  })

Select allOpen in new window

Hi,

thanks for your answer,

but, "setDatat(response ) "  gave me

  Line 18:16:  'response' is not defined  no-undef

Select allOpen in new window

I changed it to "setDatat(data)" but still the same as in my firs code.

Ahh - sorry, typo on my part. What does the console show. Go with something simple first:

fetch('http://local_server:8889/t.js', { mode: 'no-cors' })
  .then(response => response.text())
  .then(data => console.log(data));

Select allOpen in new window

Run that and see what the console shows

Hi,
Thanks for your answer,
But it's the same problem console.log give me undefined


I think the problem is maybe something in header because when I replace the URL to URL from the web it works fine.

const response = await fetch('https://swapi.dev/api/films/');const response = await fetch('https://swapi.dev/api/films/');
//this works fine, "https://swapi.dev/api/films/" is a public rest endpoint in the web  //this works fine, "https://swapi.dev/api/films/" is a public rest endpoint in the web  

const response = await fetch('http://local_server:8889/t.js',{ mode: 'no-cors' });  const response = await fetch('http://local_server:8889/t.js',{ mode: 'no-cors' });  
//"local_server" is a server in my organization running nodejs//"local_server" is a server in my organization running nodejs
 
 
but in the "local server" fetch i see the desired response in the chrome developer network response


maybe something in the header

Yeah - if you're still getting that error, then you're not using the code I showed you. The point of my code was to simplify the process so we can debug. If you're seeing the request complete in the Network tab, then you know you're getting data back.

Try my code as I showed and see what you get.

the first screenshot is with your code

It can't be - nothing in my code sent "Something went wrong" to the console, so that must be your code !!

Either use the network tab or Fiddler or WireShark to see what happens..