javascript - API 耗时太长，映射函数在数据加载之前触发

Question

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

Answer 1

this.props.getList() 是一个异步函数。您在该调用之后立即设置列表，这是不正确的。您需要在 getList promise then() block 中设置它。