Question

我是React的新手。
我能够显示带有硬代码数据的表组件。
但是现在我所有的数据都在table.json中。
您能告诉我如何使用axios get请求从table.json获取值并显示在表中吗？
如果您让我知道，那将是很棒的，以便将来我可以处理API请求。
在下面提供我的堆叠闪电战和代码。

https://stackblitz.com/edit/react-redux-realworld-sqwnsm?file=components/Sports/index.js

class EnhancedTable extends React.Component {
  state = {
    id: 1,
    order: 'asc',
    orderBy: 'order',
    selected: [],
    data: [
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
      createData('Cupcake', 'shortname', 'hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh', 1, 'Code', 'Active'),
    ],
    page: 0,
    rowsPerPage: 5,
  };

json data

[
  {
    "name": "Cupcake",
    "shortname": "shortname",
    "description": "hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh",
    "order": "1",
    "code": "code",
    "status": "active"
  },
  {
    "name": "Cupcake2",
    "shortname": "shortname2",
    "description": "hhhhbbbbhhhhjjjjkkkkjjjkkkkkkkkjjhhhhgghhjjhhhjhhjhjhjhh",
    "order": "1",
    "code": "code",
    "status": "active"
  }
]

Answer 1

Stackoverflow并不是人们为您解决代码的地方，而是您提出问题并获得说明/解释的地方。查看您的个人资料，您几乎只是将问题转给SO，并要求人们为您解决问题，尽管其中大多数人都提供了相当详细的解释。

如果您真的很陌生，以至于您不知道如何将表代映射到状态值，那么我不认为您已经准备好使用框架。在尝试使用API和框架之前，先要了解React的工作原理。您不会无所事事地将所有工作都放在SO上，并期望人们为您解决。

Answer 2

以下是使用获取（而不是axios）将获取请求发送到https://randomuser.me/

的完整示例

import React, { Component } from 'react';

class App extends Component {
  state = { users: [] };

  componentDidMount() {
    fetch('https://randomuser.me/api/?results=10&nat=us')
      .then(results => results.json())
      .then(data => {
        const users = data.results;
        this.setState({ users });
      }).catch(err => console.log(err))
  }

  render() {
    return (
      <div>
        {this.state.users.map((user, index) => {
          return (
            <div key={index}>
              <div>{user.name.first}</div>
              <img src={user.picture.thumbnail} alt="" />
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;

这是工作示例的链接：https://codesandbox.io/s/0yw5n3mm7n

使用React应用的get方法在材料UI表中显示数据

2 个答案: