如何从 ajax 响应中正确读取 json 数据？

Question

我做了这样的事情：

axios.get(url).then(result => {
   this.setState({
     list: result.data,
   });
})
.catch(e => { 
   console.log("Some error", e);
});

构造函数如下所示：

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

我想把它放在某个地方并检查它是否有效:

const {fetchedData}: any = this.state;
const data: IScheduler = fetchedData.list;

但是我得到了未捕获的类型错误：无法读取未定义的属性 'list'...

当我这样做时它起作用了：

const data: IScheduler = {
      generatedDate: "03.12.2017";
      subjects: [
          ....
      ],
};

但这不是重点。我究竟做错了什么？我该如何解决？有人可以帮我吗？

Answer 1

在您所在的州没有属性 fetchedData。您将列表设置为 this.state.list，而不是 this.state.fetchedData.list。所以你需要改变你的代码：

const {fetchedData}: any = this.state;
const data: IScheduler = fetchedData.list;

至：

const {list}: any = this.state;
const data: IScheduler = list;

应该可以。如果你真的想要你的第一个数据结构，你需要改变你的默认状态结构和setState，但是不推荐嵌套数据结构。

axios.get(url).then(result => {
   this.setState({
     fetchedData: {
       list: result.data
     }
   });
})
.catch(e => { 
   console.log("Some error", e);
});

构造函数应该如下所示：

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

如何从 ajax 响应中正确读取 json 数据？

How can I properly read json data from ajax response?

ajax

json

typescript

reactjs

axios