0

I have a js class in which I'm calling info from the startwars API. I make the response into an object array but when I assign to my State I get an error in my other component(the component is fine when I make the same info that I'm asking from the API static but when I ask from API using fetch I get an error). Here is what I have tried so far:

STATE--------

this.state = {
            data:users
        }

componentDidMount(){
const urls=[
            'https://swapi.co/api/people/1/',
            'https://swapi.co/api/people/2/',
            'https://swapi.co/api/people/3/'
        ]
        const getdata= async function(){
            const people= await Promise.all(urls.map(async function(url){
                const response=await fetch(url);
                return response.json();
            }))
      ---> error causing line     this.setState({data:people})
            console.log("people1",people);



        }}

and Second way only trying one of the links---------------------

componentDidMount()
    {
 fetch('https://swapi.co/api/people/1')
        .then(response=>response.json())
        .then(users=>this.setState({data:users}));
    }

If I do not use this method the rest of my code works even when I used it with it since this method waits a bit for the component to be mounted I see how the page is in the back then goes to error.

This where the data goes to and give me an error it says data1.map is not a function;

const Cardlist= ({data1})=>{
    return(
        <div>
           {data1.map((user,i) => {
        return (
             <Card1 
             name={data1[i].name} 
             homeworld={data1[i].mass+ " lb"}
             />
        );
    })}
        </div>
    );

}

Also this is my render 

  render(){
        return(
        <div>
            <Cardlist data1={this.state.data}/>
        </div>
        )
    }

If anyone could just enlighten me that would be much appreciated.

VericalId
  • 105
  • 12

1 Answers1

0

You have to understand how asynchronous functions work. In getData you are trying to sit into two stools. By calling each people and resolving json at once all of them. But the issue there is no async map array method, so you are returning not resolved promise.
More info. More info 2.

Here is desirable way.

const getdata= async () => {
 const peoplePromises = await Promise.all(urls.map(url => fetch(url)));
  const people = await Promise.all(peoplePromises.map(promise => promise.json()))
 this.setState({data:people})
 console.log("people1",people);
}
Talgat Saribayev
  • 1,898
  • 11
  • 19
  • It did not work I got an error which I got earlier as well saying that : Cannot read property 'SetState' of undefined but when I placed the following api it works fetch('https://jsonplaceholder.typicode.com/users') .then(response=> response.json()) .then(users=>this.setState({data:users})); console.log(this.state); I know it not the same api but code works somehow maybe I'm not making right arrays – VericalId Oct 11 '18 at 02:54
  • OK you need arrow function, instead of function definition, editied. Also when you initialize(inside `constructor`) data assign it to empty array. – Talgat Saribayev Oct 11 '18 at 04:51
  • Sorry I forgot to say yes this worked. Thank you very much – VericalId Oct 11 '18 at 23:29