1

I am doing my front in react and I am consuming microservices from laravel, there is one that the only thing it does is return a json with a list of countries, but I cannot do a cycle to access the object, I have used map and for, but nothing It works, as the microservice returns a plain text json, I first pass it through JSON.parse to create an object, and that object looks like this:

object after JSON.parse of response microservice

Here is my code of how I request using axios:

class MisDatosEmprendedor extends React.Component {
  constructor(props){
        super(props);
        this.state = {
          country:'',
        }
   }
   async componentDidMount() {
        await axios({
            url: `${countryUrl}`,
            method: 'GET',
        })
        .then(response =>{
            var objson = JSON.parse(response.data);
            this.setState({
                country: objson,
            })
        })
        .catch(error => {
            console.log(error)
            return error;
        });
   }

}

Now I try to use map to loop the render and show all countries in a select, but it tells me this.state.country.countries not defined error

render(){
        return <React.Fragment>
       {this.state.country.countries.map(function(d){
                            return(
                                <option value={d.id}>{d.name}</option>
                            )
                        })}
      </React.Fragment>
    }
Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
ZeroBathory
  • 33
  • 5
  • Does this answer your question? [How to do fetch in react?](https://stackoverflow.com/questions/56813960/how-to-do-fetch-in-react) – Emile Bergeron Jul 08 '21 at 19:06
  • Is the image you posted of the response or of the parsed JSON? If it's the response then you should just use `JSON.parse(response)`, not `JSON.parse(response.data)` – yaakov Jul 08 '21 at 19:31
  • Please post text as text, not as a picture of text. You can use `console.log(JSON.stringify(obj, null, 2))` to show a nicely formatted view of an object. Also, mixing `async/await` with `then` chaining is a good way to get yourself into trouble. Pick a paradigm and stick with it; i.e. (`try { const response = await axios(...); /* do something with response */ } catch (e) { ... }`). – Heretic Monkey Jul 08 '21 at 19:45
  • Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – Heretic Monkey Jul 08 '21 at 19:45

2 Answers2

2

I would initialise the state of country as an object like so country: {countries: []} not an empty string. As your component is already mounted it is reading an empty string, thus you have your error.

user3875913
  • 245
  • 2
  • 11
1

Your initial state does not match the data from the api. Before the request succeeds, it will throw an error. Try:

  constructor(props){
        super(props);
        this.state = {
          country: { countries: [] },
        }
   }
hjrshng
  • 1,675
  • 3
  • 17
  • 30