Проблема интеграции React с ошибками при получении данных с бэкенда

Это моя первая попытка сделать полный стек веб-разработки с использованием Django в качестве back end и react js В качестве фронтенда я следую учебнику, но застрял на заключительном этапе. Если кто-то может помочь мне, список ошибок выглядит следующим образом: не удается обновить. буду признателен

Unhandled Rejection (TypeError): Failed to execute 'fetch' on 'Window': Запрос с методом GET/HEAD не может иметь тело.

Осмотр веб-страницы 18 | 19 | class APIServiece { 20 | static UpdateArticle(article_id, body) {

21 | return fetch(' http://127.0.0.1:8000/api/articles/${article_id}/', { | ^ 22 | Метод: 'PUT', 23 | headers: { 24 | 'Content-Type': 'application/json',

файлApp.js

                  import './App.css'
              import { useState, useEffect } from 'react'
              import ArticleList from './Components/ArticleList'
              import Form from './Components/Form'

          function App() {
            const [articles, setArticles] = useState([])
            const [editArticle, setEditArticle] = useState(null)
            useEffect(() => {
              fetch(' http://127.0.0.1:8000/api/articles/', {
                Method: 'GET',
                headers: {
                  'Content-Type': 'application/json',
                  Authorization: 'Token 7654d578b64711481eea3345caf0b90646b8881f',
                },
              })
                .then((resp) => resp.json())
                .then((resp) => setArticles(resp))
                .catch((error) => console.log(error))
            }, [])
            const editBtn = (article) => {
              setEditArticle(article)
            }
            return (
              <div className='App'>
                <h1>React Js</h1>

              
                <ArticleList articles={articles} editBtn={editBtn} />

                {editArticle ? <Form article={editArticle} /> : null}
              </div>
            )
          }

          export default App

APIServiece.js

              import React from 'react'


              class APIServiece{
              
              static UpdateArticle(article_id ,body){

              return fetch(' http://127.0.0.1:8000/api/articles/${article_id}/',
              {

              Method: 'PUT',
                      headers: {
                        'Content-Type': 'application/json',
                        Authorization: 'Token 7654d578b64711481eea3345caf0b90646b8881f'
                      },
              body:JSON.stringify(body)
                    })
              .then(resp=>resp.json())


              }

              }
              export default APIServiece;

ArticleList.js

                import React from 'react'
            import App from '../App'

            function ArticleList(props) {
              const editBtn = (article) => {
                props.editBtn(article)
              }

              return (
                <div>
                  {props.articles.map((article) => {
                    return (
                      <div key={article.id}>
                        <h2>{article.title}</h2>
                        <p>{article.description}</p>
                        <div className='row'>
                          <div className='col-md-1'>
                            <button type='button' class='btn btn-danger'>
                              Delete
                            </button>
                          </div>
                          <div className='col-md-1'>
                            <button
                              type='button'
                              class='btn btn-primary'
                              onClick={() => editBtn(article)}
                            >
                              Update
                            </button>
                          </div>
                        </div>
                        <hr className='hr' />
                      </div>
                    )
                  })}
                </div>
              )
            }

            export default ArticleList

Вернуться на верх