ajax请求后无法读取属性值

时间:2017-12-09 16:34:38

标签: ajax reactjs typescript axios

我的代码如下所示:

constructor(props: any) {
    super(props);
    this.state = {
        list: [],
    };
}

public componentWillMount() {
    this.getData();
}

public getData = () => {   
        axios.get(someURL)
        .then( (response) => {
            this.setState({list: response.data.arrivals});
        })
        .catch( (error) => {
            console.log("FAILED", error);
        });
}

public render(): JSX.Element {
    const {list}: any = this.state;
    const data: IScheduler = list;

    console.log("TEST");

    console.log(data); //cannot get data here

    console.log("TEST");

    return (
        <div className="main-page-container">
            <ArrivalsTable data={data}/>
        </div>
    );
}

我的问题是我无法读取数据。

 console.log(data);

给了我一个数组:

length: 0
__proto__: Array(0)

 console.log(data.generatedDate);

给出:

 undefined

我的数据样本(已修改):

{
   "arrivals": [
       {
          "generatedDate": "03.12.2017"
       }
        ...
    ]
}

我想知道如何解决这个问题。有人可以帮忙吗?

(试图解决这个问题,但我仍然无法在render()中获取数据)

有没有其他方法可以从URL获取数据并将它们放入属性?

1 个答案:

答案 0 :(得分:0)

getData应如下所示

axios.get(someURL)
    .then((response) => {
        this.setState({list: response.data.arrivals});
    })
    .catch( (error) => {
        console.log("FAILED", error);
    });
}

请注意this.setState({list: response.data.arrivals});部分。