Question

无法通过 API 来响应前端

2021-12-16

66

node.js reactjs api

我正在努力将 api 拉到前端。我使用 https://jsonplaceholder.typicode.com/ 成功完成了它，只需映射出数组即可。然而，我正在努力通过我想使用的这个单独的 api

https://gateway.marvel.com/v1/public/comics?apikey=xxxxxxxxxxxxxxxx&ts=redant&hash=140e85a50884cef76d614f6dacada288

错误是.. “未捕获的 TypeError：无法读取未定义的属性（读取‘结果’）”

显然它实际上无法获得结果

我在做什么错了吗？

import React, {Component} from 'react';
import './App.css';


class App extends Component {
  constructor() {
    super();
    this.state = {
    list: []
    };
  }

  componentDidMount() {
    fetch('https://gateway.marvel.com/v1/public/comics?apikey=3cb62d086d5debdeea139095cbb07fe4&ts=redant&hash=140e85a50884cef76d614f6dacada288')
    .then (response =>  response.json())
    .then(users => this.setState({list:users}))
  }


  render() {
    return (
      <div className='App'>
  
    {
      this.state.list.data.results.map(result => 
      <h1 key={result.id}>{result.urls}</h1>
      )
    }

      </div>
    )
  }
}

export default App

Answer 1

代码中的错误 Uncaught TypeError: Cannot read properties of undefined (reading 'results') 意味着 this.state.list.data 返回为 undefined 。这意味着您需要关注状态属性 list 以确保它具有 data 属性。正如我们在构造函数中看到的那样， data 被初始化为一个不包含 data 属性的空数组。我们可以采取一些措施来防止出现错误，即用未定义的检查包围您的代码：

if (this.state.list.data != undefined) {
   this.state.list.data.results.map(result => 
      <h1 key={result.id}>{result.urls}</h1>
   )
}

不过，此时，我们不知道您的 API 调用是否返回了良好的数据，因为您的程序在此之前抛出了错误（因为 fetch 和 setState 是异步的），所以上面的代码主要解决您遇到的错误，而不是关注您问题的“通过 api 拉到前端”部分。

Answer 2

获取结果后，您可以在 then 部分中执行以下操作

this.setState({list:users.data.results}

在 map 函数中，执行以下操作：

this.state.list.map(result => 
  <h1 key={result.id}>{result.urls}</h1>

您收到错误是因为 List 最初为空，它没有任何称为 results 的 key ，只有获取结果后，您才能循环遍历结果。

另一个解决方案是简单地添加一个加载器，您也可以通过状态来控制它。