如何从 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;

但我得到未捕获的 TypeError: cannot read property 'list' of undefined...

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

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: []
       }
   };
}