Correct way to fetch through array

Question

In the below compoenent, the function is neverending. Can someone tell me what to fix so that in the end the beers array in the state has 5 names?

export default class GetBeers extends React.Component {
    constructor() {
        super();
        this.state = {
          beers: [],
          didError: false
        };
      this.getBeerInfo = this.getBeerInfo.bind(this);
    }
    
    render() {
      return (
        ...
    }
    getBeerInfo() {
        let beerArr = [1,2,3,4,5];
        this.props.beerArr.map(id => {
          fetch(`https://api.punkapi.com/v2/beers/${id}`)
          .then(res => res.json())
          .then(json => {
            this.setState(state => {
              const beers = state.beers.concat(json[0].name);
         
              return {
                beers
              };
            });
          })
          .catch(err => {
            this.setState({
              didError : true
            });
          });
        })
      }
}

Anupam Minz · Accepted Answer · 2020-06-23 12:02:54Z

Well your code should be somethings like this ..

import React from 'react';
export default class GetBeers extends React.Component {
    constructor() {
        super();
        this.state = {
            beers: [],
            didError: false
        };
        this.getBeerInfo = this.getBeerInfo.bind(this);
    }

    render() {
        return (
            <div>{this.state.beers}</div>
        )
    }
    
    componentDidMount() {
        this.getBeerInfo()
    }

    getBeerInfo() {
        let beerArr = [1,2,3,4,5];
        beerArr.map(id => {
            fetch(`https://api.punkapi.com/v2/beers/${id}`)
                .then(res => res.json())
                .then(json => {
                    this.setState({
                        //const beers = state.beers.concat(json[0].name);
                        //return {
                            //beers
                        //};
                        beers: this.state.beers.concat(json[0].name)
                    });
                    console.log('well at least this works')
                })
                .catch(err => {
                    this.setState({
                        didError : true
                    });
                });
        })
    }
}

It is advised that you use the componentDidMount() lifecycle method for the fetch api and add what @atahnksy said.

atahanksy · Accepted Answer · 2020-06-23 11:39:15Z

1

When you are using setState, you can try this:

this.setState({ beers: [...this.state.beers, json[0].name])

This might fix your problem.

answered Jun 23, 2020 at 11:39

atahanksy

1022 silver badges10 bronze badges

2 Comments

Shauna Over a year ago

It is still neverending, unfortunately.

Luïs Over a year ago

It re-renders everytime state updates. So this one won't work unfortunately.

AfamO · Accepted Answer · 2020-06-23 15:14:19Z

0

You can improve the render method using a combination of ternary operator(to display appropriate message when it cannot reach the server), format with map and ordered list to get something like this :

render() {
    return (
        <div><ol>{this.state.beers.length!==0 ? this.state.beers.map((beer)=><li>{beer}</li>) :"Could not retrieve any bears. Try again/ensure you can access the server/networtk"}</ol></div>
    )
}

answered Jun 23, 2020 at 15:14

AfamO

8998 silver badges8 bronze badges

Collectives™ on Stack Overflow

Correct way to fetch through array

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related