Выбрать и отобразить данные из Django Rest Api

Question

после того, как последовал много уроков о том, как интегрировать Django rest в React, мне удалось получить данные из моего API, как это, но заголовок моей таблицы повторяется по количеству объектов, которые я выбираю из моих данных, у меня есть 3 продукта вмои данные, так что составьте таблицу 3 раза.Когда я пытаюсь переместить {this.state.todos.map (item => (непосредственно перед моим), я получаю ошибку, потому что это «ломает» мой тег, поэтому я могу поместить {this.state.todos.map (item =>(прямо перед моим или сразу после, кто-то может помочь мне, плз? я просто хочу повторить для каждого элемента, но не для всей таблицы, спасибо вам за помощь

Визуализация моей таблицы на локальном сервере

 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;

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