Reactjs 阵列中每个项目的单独Axios调用
我对使用带有React的axios调用不是很有经验,我正在尝试进行axios调用以获取数组,然后使用该数组为数组中的每个项目进行axios调用。我从第一次调用中获取数组,然后从每个单独调用中获取对象数组,但在状态更新后,不会呈现任何内容。这是我的密码: 我尝试使用一个单独的方法来更新对象数组的状态,但没有成功Reactjs 阵列中每个项目的单独Axios调用,reactjs,axios,render,Reactjs,Axios,Render,我对使用带有React的axios调用不是很有经验,我正在尝试进行axios调用以获取数组,然后使用该数组为数组中的每个项目进行axios调用。我从第一次调用中获取数组,然后从每个单独调用中获取对象数组,但在状态更新后,不会呈现任何内容。这是我的密码: 我尝试使用一个单独的方法来更新对象数组的状态,但没有成功 state = { items: [], searchItem: "newstories", promises: [{}] }; componentDid
state = {
items: [],
searchItem: "newstories",
promises: [{}]
};
componentDidMount() {
const { searchItem } = this.state;
axios
.get(
"https://hacker-news.firebaseio.com/v0/" +
this.state.searchItem +
".json?print=pretty"
)
.then(result => {
const topStories = result.data;
this.setState({ topStories });
let promises = [];
for (let i = 0; i < topStories.length; i++) {
axios
.get(base + topStories[i] + extension)
.then(res => {
const newItem = res.data;
promises.push(newItem.title);
})
.catch(error => console.log("Something went wrong"));
}
// Set the state of the array of objects
this.setState({ promises });
});
}
render() {
let counter = 0;
return (
<div>
{this.state.promises.map(stories => (
<li style={{ listStyle: "none" }} key=stories.id>
{(counter += 1)}. {stories.title}
</li>
))}
</div>
);
}
}
状态={
项目:[],
searchItem:“newstories”,
承诺:[{}]
};
componentDidMount(){
const{searchItem}=this.state;
axios
.得到(
"https://hacker-news.firebaseio.com/v0/" +
this.state.searchItem+
“.json?print=pretty”
)
。然后(结果=>{
const topStories=结果数据;
this.setState({topStories});
让承诺=[];
for(设i=0;i{
const newItem=res.data;
promises.push(newItem.title);
})
.catch(错误=>console.log(“出错”);
}
//设置对象数组的状态
this.setState({promises});
});
}
render(){
设计数器=0;
返回(
{this.state.promises.map(stories=>(
{(计数器+=1)}.{stories.title}
))}
);
}
}
我希望能够映射和获取每个对象,并相应地使用每个对象的属性。每个对象如下所示:
{作者:“thinksocrates”id:20004127儿童:[……]分数:28题:“OKR”}
渲染没有返回任何标题,但在状态更改后,我可以在控制台日志中看到它们,因此我不确定发生了什么。我猜我得到的承诺数组不正确,但我不确定如何使用axios.all来解决这种情况。您需要在这里使用
Promise.all
您的promise数组使用promises而不是对象填充,要正确呈现它们,您需要等待所有响应
此外,componentDidMount()内的此操作将花费大量时间,因此最好考虑使用加载程序初始化状态,直到所有响应检索到此.setState({promises})代码>将在解决所有承诺之前运行。这是更好的解决方法
.then(result => {
const topStories = result.data;
const promises = topStories.map(story => {
return axios.get(base + story + extension).then(res => res.data)
})
Promise.all(promises).then(data => {
console.log(data)
this.setState({ promises: data })
})
更改渲染
render() {
return (
<div>
{this.state.promises.map((stories, index)=> (
<li style={{ listStyle: "none" }} key=stories.id>
{`${index + 1}}.${stories.by}`}
</li>
))}
</div>
);
}
render(){
返回(
{this.state.promises.map((故事,索引)=>(
{${index+1}}.${stories.by}}
))}
);
}
是的,这是有道理的,没有办法从API预加载吗?我有点不想使用填充文本。我得到了一个在设置状态后为空的故事。(500)[…] [0…99] 0:Object{by:“yarapavan”,子代:0,id:20019533,…} 1:对象{by:“thehogrammer”,后代:0,id:20019532,…} 2:Object{by:“jkuria”,后代:0,id:20019499,…} 3:Object{by:“espeed”,后代:0,id:20019496,}我还添加了填充文本,直到收到所有承诺并更改布尔值。。。{this.state.isMounted==true?(this.state.promissions.map(stories=>(