如何在 React ZD3E28535C74CCEE29182AEB3CF837E 中从 WEB API 中指定 JSON 数据

Question

Just a simple question here, I'm using ASP.NET Web API and ReactJS, and the instrument for reading JSON I'm currently using Axios, this is my JSON data:

[
    {
        "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
    }
]

This is my axios request:

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

currently I'm using this, but I get an error: (Uncaught TypeError: Cannot read property '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 help or correction would be appreciated!

Answer 1

So your the data your working with (monsters / on the component actually this.state.monsters because it looks like you're using react) is an array of objects. When you do monsters.map you are looping over each element in your monsters array. The function you pass to monsters.map will take a parameter (your first '???') which will point to each object as it loops over the array. Inside that function you can use that parameter to access keys on the monster object. Which is how we fill out the rest of the '???'

It would look like this:

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

loop through like this. Do not use curly braces {} on monster parameter will fix ur issue.

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

Answer 3

It's possible to do what you're trying to do. If you still want to de-structure your array items, you need to change {items} to what you're using. In this case {id, name, age} .

The difference between both ways would be:

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

And

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

Here is a working example, using a placeholder API: Codesandbox