在 ReactJS 上从 url 的 json 数据渲染列表

Question

我想在 ReactJS 上从 url 的 json 数据中呈现列表这是 loaclhost 10.0.10.10/3000

上的数据

对使用 axios 或 fetch 感到困惑

{
  "users": [{
      "_id": "7odGhvEvLBYtQujdZ",
      "createdAt": "2019-07-23T10:48:01.438Z",
      "username": "123",
      "profile": {
        "active": "true"
      }
    },
    {
      "_id": "dgBWJ4qBNx94MketL",
      "createdAt": "2019-07-23T15:33:34.270Z",
      "username": "user1",
      "profile": {
        "active": "true"
      }
    },
    {
      "_id": "hNTnjMEXdn5gbNSGZ",
      "createdAt": "2019-07-23T16:16:56.070Z",
      "username": "user2",
      "profile": {
        "active": "true"
      }
    },
    {
      "_id": "porAsWJ3ba48JnLPd",
      "createdAt": "2019-07-23T10:21:05.541Z",
      "username": "user3"
    },
    {
      "_id": "f6NJpu8rggfGmYJEY",
      "createdAt": "2019-07-30T11:47:54.652Z",
      "username": "usre4",
      "profile": {
        "active": true
      }
    },
    {
      "_id": "anZQB6PsfuatCGxA6",
      "createdAt": "2019-07-30T11:44:55.997Z",
      "username": "user5",
      "profile": {
        "active": true
      }
    }
  ]
}

我想要一个简单的方法来显示列表中的这些数据或 table 在 reactJS 中。

使用 axios 或 fetch。

Answer 1

使用Array.map为每个条目呈现模板

class ListComponent extends Component {

  constructor(props) {
    super(props);

    this.state = {
      articles: [],
    }
  }


  async componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/todos/')
    .then(response => response.json())
    .then(json => {
      this.setState({
        articles: json,
      })
    })
  }

  render() {
    return (
      this.state.articles.map(row => <div key={row._id}>{row.username}</div>)
    )
  }

}

Answer 2

你可以使用它们中的任何一个，但我觉得 Axios 会很方便，因为它内置了 .json() 方法而不是 fetch() 并且它支持 Promise API原生于 JS ES6。

当您使用 fetch() 时，处理 JSON 数据时，它是一个两步过程。第一个是发出实际请求，第二个是对响应调用 .json() 方法。

就在 React 中显示它而言，您可以对其进行迭代，因为它是 arraylist，一个相同的简短示例：

<div>
    <ul>{list.map(name => <li key={list._id}> {list.username} </li>)}</ul>
</div>

_map 来自 lodash

const result = _.map(list, function(value, key) {
  return value ;
});

或者您也可以对每个使用。

在 ReactJS 上从 url 的 json 数据渲染列表

render list from json data from url on ReactJS

json

render

list

reactjs