Question

我正在使用从文档中获取AJAX的示例，并正在获取它：

 https://learnwebcode.github.io/json-example/animals-1.json

这是componentDidMount部分：

componentDidMount() {
fetch("https://learnwebcode.github.io/json-example/animals-1.json")
  .then(res => res.json())
  .then(
    (result) => {
      this.setState({
        isLoaded: true,
        items: result.items
      });
    },

我收到“ promise中的未捕获类型错误，无法读取未定义的属性映射”

为什么会这样？这是我第一次尝试使用访存API。我尝试记录响应对象，但是返回未定义。

笔的链接在这里：

 https://codepen.io/damPop/pen/yQLbxV

Answer 1

渲染方法出错。

由于数据处于“结果”中，因此从result.item中删除了项目。

像下面一样

componentDidMount() {
fetch("https://learnwebcode.github.io/json-example/animals-1.json")
  .then(res => res.json())
  .then(
    (result) => {
      this.setState({
        isLoaded: true,
        items: result // remove items, because data is in 'result'
      });
    },

Answer 2

结果是项的数组，因此result.item不存在：

componentDidMount() {
 fetch("https://learnwebcode.github.io/json-example/animals-1.json")
 .then(res => res.json())
 .then(result => {
     console.log(result)
     this.setState({
       isLoaded: true,
       items: result
     });
   })
 .catch(error => {
   this.setState({
     isLoaded: true,
     error
   });
 })
}

https://codepen.io/mThorning/pen/ZmEyao?editors=0010

反应ajax获取响应未定义

2 个答案: