Fetch return undefined in react

Question

I'm trying to use WordPress API with react, but it returns id instead of the tag name, so I'm trying to fetch the tag name with another API call. but it keeps returning undefined. When I add return before fetch inside getCategory() it just errors out.

componentDidMount() {
const URL =
  'https://public-api.wordpress.com/wp/v2/sites/sitename/posts/';

  fetch(URL)
  .then(res => res.json())
  .then(posts => {

    const post = posts.map(post => {
      return {
        ...post,
        categories: this.getCategory(...post.categories)
      };
    });

    this.setState({ posts: post });

    console.log(post);
  })
  .catch(err => console.log(err));
  }

  getCategory(id) {
   const URL = `https://public-api.wordpress.com/wp/v2/sites/sitename/categories/${id}`;

fetch(URL)
  .then(data => data.json())
  .then(res => res.name)
 }

A possible bug is that your getCategory expects a single id, but you are spreading all the post.categories there. — user9539019
– user9539019, Commented May 20, 2018 at 21:12
Ok so I commented out the setState and added return to fetch inside the getCategory() function now I return a promise for value categories, but when I call .then after this.getCategory(...post.categories) it's still a promise? — Shakhor
– Shakhor, Commented May 20, 2018 at 21:21
Mind you that getCategory has no return value, and even if you return the fetch, you are returning a Promise. Also, you might want to edit out your URLs — ionizer
– ionizer, Commented May 20, 2018 at 21:56

Shakhor · Accepted Answer · 2018-05-20 22:23:16Z

2

Basically, your problem is that you're setting the state before the fetch in getCategory resolves. To address that, you can await for its result --

componentDidMount() {
  const URL = 'https://public-api.wordpress.com/wp/v2/sites/sitename/posts/';  
  fetch(URL)
    .then(res => res.json())
    .then(posts => {
      return Promise.all(posts.map(async post => {
        return {
          ...post,
          categories: await this.getCategory(...post.categories)
        };
      }));
    })
    .then(posts => this.setState({ posts: posts }))
    .catch(err => console.log(err));
}

getCategory(id) {
  const URL = `https://public-api.wordpress.com/wp/v2/sites/sitenameress.com/categories/${id}`;

  return fetch(URL)
    .then(data => data.json())
    .then(res => res.name)
}

edited May 20, 2018 at 22:23

Shakhor

2503 silver badges10 bronze badges

answered May 20, 2018 at 21:58

user9539019

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

Comments

Shakhor · Accepted Answer · 2018-05-20 22:28:50Z

1

first: getCategory method returns nothing.

getCategory(id) {
   const URL = `https://public-api.wordpress.com/wp/v2/sites/sitename/categories/${id}`;

return fetch(URL).then(data => data.json()).then(res => res.name);

}

second: when you run setState method (probably) http request for category (getCategory) is still running, so categories are not set yet.

you should use Promise.all() method to be sure all http requests are done before you call setState method.

edited May 20, 2018 at 22:28

Shakhor

2503 silver badges10 bronze badges

answered May 20, 2018 at 21:50

ersin.erdal

413 bronze badges

Comments

ionizer · Accepted Answer · 2018-05-20 22:24:17Z

Referencing @lyosha-korogoda's answer, if you can't use async/await, try something like this instead:

componentDidMount() {
  const URL = 'https://public-api.wordpress.com/wp/v2/sites/<YOUR_WORDPRESS_URL>/posts/';

  fetch(URL)
    .then(res => res.json())
    .then(posts => {
      this.getCategory(...post.categories).then(category => {
        const post = posts.map(post => {
          return {
            ...post,
            categories: category
          };
        });
        this.setState({ posts: post });
        console.log(post);
      })
    })
    .catch(err => console.log(err));
}

getCategory(id) {
  const URL = `https://public-api.wordpress.com/wp/v2/sites/<YOUR_WORDPRESS_URL>/categories/${id}`;

  return fetch(URL)
    .then(data => data.json())
    .then(res => res.name)
}

Note how I moved getCategory out and wrapping the map into it's then block. Honestly the code could be cleaner, but just to show how it works.

As to why your fetch returns undefined, first it's because your getCategory(id) did not return anything. And second, it's simply because how JavaScript's asynchronous nature really, so your const post doesn't have value because getCategory(id) has not finished at that time.

Collectives™ on Stack Overflow

Fetch return undefined in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related