Как указать данные JSON из WEB API в React Axios

Question

Просто простой вопрос, я использую 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)
 }
}

в настоящее время я использую это, но я получаю ошибку: (Uncaught TypeError: Невозможно прочитать свойство 'name' of undefined)

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>
    );
  }

Anyпомощь или исправление будут оценены!

Answer 1

Таким образом, ваши данные, с которыми вы работаете (монстры / над компонентом на самом деле this.state.monsters, потому что, похоже, вы используете реагировать), представляют собой массив объектов. Когда вы делаете monsters.map, вы циклически повторяете каждый элемент в вашем массиве monsters. Функция, которую вы передаете в monsters.map, примет параметр (ваш первый '???'), который будет указывать на каждый объект, когда он проходит по массиву. Внутри этой функции вы можете использовать этот параметр для доступа к ключам объекта-монстра. Вот как мы заполняем оставшуюся часть «???»

Это будет выглядеть так:

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

Answer 2

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>`

Answer 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