从 Django Rest Api 获取并显示数据答案

【问题标题】：Fetch and display Data from Django Rest Api从 Django Rest Api 获取并显示数据
【发布时间】：2018-11-10 23:57:18
【问题描述】：

在学习了许多关于如何在 React 中集成 Django rest 的教程之后，我成功地从我的 api 中获取数据，但是我的表头重复了我从数据中获取的对象数量，我有 3 个产品我的数据就是做表 3 次。当我尝试移动 {this.state.todos.map(item => ( 就在我收到错误之前，因为那个“破坏”了我的标签，所以我可以把 {this.state.todos.map(item => （就在我之前或之后，有人可以帮助我吗？我只想重复每个项目而不是所有表，谢谢你的帮助

Render of my table in the local server

 import React, { Component } from 'react';

 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>
      {this.state.todos.map(item => (
        <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>
             <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>
  );
}
 }


 export default Products;

【问题讨论】：

标签： django reactjs django-rest-framework

【解决方案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>
    );
  }
}

【讨论】：