无法通过 API 对前端做出反应答案

【问题标题】：Unable to pull through API to react frontend with无法通过 API 对前端做出反应
【发布时间】：2022-01-19 12:49:44
【问题描述】：

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

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

错误是.. "Uncaught TypeError: Cannot read properties of undefined (reading 'results')"

很明显它实际上无法获得结果

我做错了什么？

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

【问题讨论】：

首先您将this.state.list 设置为一个空数组，但在render() 中您尝试访问this.state.list.data。 array 没有属性 data，所以这没有任何意义。 fetch 和 setState 也是异步的。当您的组件第一次呈现时，this.state.list 将是一个空列表，并且请求只会在组件第一次安装和呈现之后开始。
也不要在关于 SO 的公开访问问题中包含 API 机密。我为你删除了它。如果这是一个敏感的秘密，请从现在开始考虑它已被泄露并尽快更改。

标签： node.js reactjs api

【解决方案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 拉到前端”部分。

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：