Question

之后关于如何在React中集成Django休息的许多教程我成功地从我的api中获取数据，但是我的表的标题重复了我从我的数据获取的对象的数量，我有3个产品在我的数据使表格成为3倍。当我试图移动{this.state.todos.map（item =＆gt;（就在我得到错误之前，因为那个“打破”我的标签，所以我可以放{this.state.todos.map（item = ＆gt;（就在我之前或之后，有人可以帮助我PLZ？我只想重复每个项目而不是所有表格，谢谢你的帮助

Render of my table in the local server

body_matching

Answer 1

您正在映射整个表格。这会将每个项目映射到一行：

class Products extends Component {
  state = {
    todos: []
  };

  async componentDidMount() {
    try {
      const res = await fetch('http://127.0.0.1:8000/api/');
      const todos = await res.json();
      this.setState({
        todos
      });
    } catch (e) {
      console.log(e);
    }
  }
  render() {
    return (
      <div>
        <table class="table table-bordered table-hover table-striped">
          <thead>
            <tr class="bg-gray text-white">
              <th>Id</th>
              <th>Category</th>
              <th>Name</th>
              <th>Short Description</th>
              <th>Price</th>
              <th class="text-center">Image</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            {this.state.todos.map(item => (
              <tr>
                <td scope="row">{item.title}</td>,
                <td scope="row"></td>,
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>Delete</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

从Django Rest Api获取并显示数据

1 个答案: