import React, { Component } from 'react';
import {withProvider} from './TProvider'
import ThreeCardMap from './ThreeCardMap';
class Threecard extends Component {
constructor() {
super();
this.state = {
newlist: []
}
}
componentDidMount(){
this.props.getList()
this.setState({newlist: [this.props.list]})
}
// componentDidUpdate() {
// console.log(this.state.newlist);
// }
render() {
const MappedTarot = (this.state.newlist.map((list, i) => <ThreeCardMap key={i} name={list.name} meaningup={list.meaning_up} meaningdown={list.meaning_rev}/>);
return (
<div>
<h1>Three Card Reading</h1>
<div>{ MappedTarot }</div>
</div>
)
}
}
export default withProvider(Threecard);
您好,我正在尝试创建一个从塔罗牌 API ( https://rws-cards-api.herokuapp.com/api/v1/cards/search?type=major) 获取数据的页面。不幸的是,当数据进来时,我的 map 功能已经启动了。我想看看是否有办法让 map 函数在触发之前等待数据命中。谢谢!
编辑:上下文中的 getList 函数:
getList = () => {
console.log('fired')
axios.get('https://vschool-cors.herokuapp.com?url=https://rws-cards-api.herokuapp.com/api/v1/cards/search?type=major').then(response =>{
this.setState({
list: response.data
})
}).catch(error => {
console.log(error);
})
}
最佳答案
this.props.getList() 是一个异步函数。您在该调用之后立即设置列表,这是不正确的。 您需要在 getList promise then() block 中设置它。
关于javascript - API 耗时太长,映射函数在数据加载之前触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55034532/