Question

我有一个js类，其中从startwars API调用信息。我将响应放入一个对象数组中，但是当我分配给我的州时，我的其他组件出现了错误（当我将与API相同的信息设为静态但当我使用API向API询问时，该组件很好提取我得到一个错误）。到目前为止，这是我尝试过的：

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



        }}

和第二种方式仅尝试其中一个链接---------------------

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中，您试图坐在两个凳子上。通过呼叫每个人并一次解决所有人的json。但是问题是没有async map数组方法，因此您返回的是未解决的Promise。
More info。 More info 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);
}

当我们从API的数组中获取信息时，如何正确设置状态

1 个答案: