如何在 React Axios 中从 WEB API 指定 JSON 数据答案

【问题标题】：How to specify JSON data from WEB API in React Axios如何在 React Axios 中从 WEB API 指定 JSON 数据
【发布时间】：2020-03-03 05:39:18
【问题描述】：

这里只是一个简单的问题，我正在使用 ASP.NET Web API 和 ReactJS，以及读取 JSON 的工具我正在使用 Axios，这是我的 JSON 数据：

[
    {
        "id": 1,
        "name": "Count Duck",
        "age": 3
    },
    {
        "id": 4,
        "name": "Count Dracula",
        "age": 288
    },
    {
        "id": 5,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 6,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 7,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 8,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 9,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 10,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 11,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 12,
        "name": "Frankenstein",
        "age": 45
    },
    {
        "id": 13,
        "name": "Frankenstein",
        "age": 45
    }
]

这是我的 axios 请求：

async getDataAxios(){
    const response = await axios.get("https://localhost:5001/monsters");
    const data = await response.data;
    this.setState({ monsters: data, loading: false });
    console.log(data);
  } catch(err) {
      console.log(err)
 }
}

目前我正在使用它，但出现错误：（未捕获的类型错误：无法读取未定义的属性“名称”）

static renderMonstersTable(monsters) {
    return (
      <table className='table table-striped' aria-labelledby="tabelLabel">
        <thead>
          <tr>
            <th>Username</th>
            <th>Image</th>
          </tr>
        </thead>
        <tbody>
          {monsters.map(({items}) =>
            <tr key="">
              <td>{items.name}</td>
              <td>{items.age}</td>
            </tr>
          )}
        </tbody>
      </table>
    );
  }

任何帮助或更正将不胜感激！

【问题讨论】：

How to set state of response from axios in react的可能重复
您正在解构 { items }，但您的对象上没有 items 属性。从您的项目对象周围取下大括号

标签： javascript reactjs axios

【解决方案1】：

async getDataAxios(){
  try{
    const response = await axios.get("https://localhost:5001/monsters");
    const data = response.data; /// you don't really need await here
    this.setState({ monsters: data, loading: false });
  } catch(err) {
      console.log(err)
 }
}

这样循环。不要在怪物参数上使用花括号 {} 将解决您的问题。

monsters.map( monster =>
            `<tr key=${monster.id}>
              <td>${monster.name}</td>
              <td>${monster.age}</td>`

【讨论】：

【解决方案2】：

因此，您使用的数据（monsters / 在组件上实际上是 this.state.monsters，因为看起来您正在使用 react）是一个对象数组。当您执行 monsters.map 时，您将遍历 Monsters 数组中的每个元素。您传递给 monsters.map 的函数将采用一个参数（您的第一个 '???'），该参数将指向每个对象，因为它在数组上循环。在该函数中，您可以使用该参数访问怪物对象上的键。我们如何填写其余的“？？？”

看起来像这样：

(
  monsters.map(monster => (
    <tr key={monster.id}>
      <td>{monster.name}</td>
      <td>{monster.age}</td>
    <tr/>
  )
)

【讨论】：

{users.map(items => {items.name} {items.age} )}

【解决方案3】：

你可以做你想做的事。如果您仍想对数组项进行解构，则需要将 {items} 更改为您正在使用的内容。在这种情况下{id, name, age}。

这两种方式的区别是：

{monsters.map(({ id, name, age}) => (
  <tr key={id}>
  <td>{name}</td>
  <td>{age}</td>
  </tr>
))}

和

{monsters.map(monster => (
  <tr key={monster.id}>
  <td>{monster.name}</td>
  <td>{monster.age}</td>
  </tr>
))}

这是一个使用占位符 API 的工作示例：Codesandbox

【讨论】：