Как правильно установитьState, когда мы получаем информацию из массива API

Question

У меня есть класс js, в котором я вызываю информацию из API startwars.Я делаю ответ в массиве объектов, но когда я присваиваю свой State, я получаю ошибку в моем другом компоненте (компонент в порядке, когда я делаю ту же информацию, которую я запрашиваю из API, статическую, но когда я спрашиваю из API, используяполучить я получаю ошибку).Вот что я пробовал до сих пор:

СОСТОЯНИЕ --------

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);



        }}

и Второй способ, пробующий только одну из ссылок:-------------------

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

Если я не использую этот метод, остальная часть моего кода работает, даже если я использовал его вместе с этимМетод немного ждет, пока компонент будет смонтирован. Я вижу, как выглядит страница, а затем идет ошибка.

Здесь, куда идут данные и выдается ошибка, говорится, что data1.map не является функцией;

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

}

Также это мой рендер

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

Если бы кто-то мог просто просветить меня, это было бы очень ценно.

Answer 1

Вы должны понимать, как работают асинхронные функции.В getData вы пытаетесь сесть на два стула.Позвонив каждому народу и решив сразу всех из них.Но проблема в том, что нет async map метода массива, поэтому вы возвращаете не решенное обещание. Подробнее . Подробнее 2 .Вот желательный путь.

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);
}