Setting a state in fetch call gives me undefined?

Question

Hi im trying to set a state in my fetch call, When I try to access the state it returns undefined. Im not sure why it does this can someone help?


 var [articlearray, setArticle]= React.useState([]);
 
 var options = {
     method: 'POST',
     headers: {
         'Content-Type': 'application/json'
         },
         body: JSON.stringify({headline: props.headline})

     };

     
 fet(options)
        
 function fet(options){
     
     fetch('/headlines', options).then(response => response.json()).then(data =>{
     
        
          var newsData = data.newsArray

         

         setArticle(newsData)
        
        
       })
     
 }
console.log(articlearray[0]);

It's impossible to say without seeing the entire component, but it's likely your `console.log` is running before the fetch completes. — ray, May 12 '21 at 16:08
Your code isn't executing top to bottom. Your `console.log` executes long before your fetch callback runs. Additionally, `setArticle` is asynchronous, so `articlearray` won't be available until the next component render. You should get comfortable using `console.log` to debug your code. — Andy Ray, May 12 '21 at 16:17
its crazy because it worked for me yesterday. and yes I need the POST — Davon Wilson, May 12 '21 at 16:17
Does this answer your question? [How to return value from an asynchronous callback function?](https://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function) — Andy Ray, May 12 '21 at 16:18
if its asynchronous do you know how I would go about changing it so I can access article array variable ? — Davon Wilson, May 12 '21 at 16:20

Kevin Yobeth · Accepted Answer · 2021-05-12T16:59:54.093

0

You could use useEffect to load all of your data from an API endpoint. The emtpy array [] on the useEffect means that it will run once, on the beginning of the lifecycle.

var [articlearray, setArticle] = React.useState([]);

const fetchData = async () => {
  var options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      headline: props.headline
    })
  };

  fetch('/headlines', options).then(response => response.json()).then(data => {
    var newsData = data.newsArray;
    setArticle(newsData);
    console.log(articlearray[0]);
  })
}

useEffect(() => {
  fetchData();
}, []);

edited May 12 '21 at 16:59

answered May 12 '21 at 16:43

Kevin Yobeth

939
1
8
17

thanks for the answer ..but for some reason its still not working for me ...Its just not letting me set the state of variable articlearray – Davon Wilson May 12 '21 at 16:54
I have updated the code. I moved the console log to the then section. It should print the data, if not, you might want to check if the endpoint is sending the correct response. – Kevin Yobeth May 12 '21 at 17:00
still a no go ...smh ill figure it out ...my endpoints are working and the news data variable gives me what I want but I just can't set the state of article array – Davon Wilson May 12 '21 at 17:20
it works the issue was somewhere else entirely thanks for your help – Davon Wilson May 12 '21 at 19:01

Setting a state in fetch call gives me undefined?

1 Answers1