使用React和Django时POST http：// localhost：8000 / api / posts / action / 400错误请求

如何解决使用React和Django时POST http：// localhost：8000 / api / posts / action / 400错误请求

我正在尝试使用React和Django构建一个全栈应用程序。 我正在从Django服务器向React发送API请求。这是我的代码执行方式：

posts / component.js：

import React,{useEffect,useState}  from 'react'

import {
  apiPostAction,apiPostCreate,apiPostList} from './lookup'

export function PostsComponent(props) {
    const textAreaRef = React.createRef()
    const [newPosts,setNewPosts] = useState([])
    
    const handleBackendUpdate = (response,status) =>{
      // backend api response handler
      let tempNewPosts = [...newPosts]
      if (status === 201){
        tempNewPosts.unshift(response)
        setNewPosts(tempNewPosts)
      } else {
        console.log(response)
        alert("An error occured please try again")
      }
    }

    const handleSubmit = (event) => {
      event.preventDefault()
      const newVal = textAreaRef.current.value
      // backend api request
      apiPostCreate(newVal,handleBackendUpdate)
      textAreaRef.current.value = ''
    }
    return <div className={props.className}>
            <div className='col-12 mb-3'>
              <form onSubmit={handleSubmit}>
                <textarea ref={textAreaRef} required={true} className='form-control' name='post'>

                </textarea>
                <button type='submit' className='btn btn-primary my-3'>Post</button>
            </form>
            </div>
        <PostsList newPosts={newPosts} />
    </div>
}

export function PostsList(props) {
    const [postsInit,setPostsInit] = useState([])
    const [posts,setPosts] = useState([])
    const [postsDidSet,setPostsDidSet] = useState(false)
    useEffect(()=>{
      const final = [...props.newPosts].concat(postsInit)
      if (final.length !== posts.length) {
        setPosts(final)
      }
    },[props.newPosts,posts,postsInit])

    useEffect(() => {
      if (postsDidSet === false){
        const handlePostListLookup = (response,status) => {
          if (status === 200){
            setPostsInit(response)
            setPostsDidSet(true)
          } else {
            alert("There was an error")
          }
        }
        apiPostList(handlePostListLookup)
      }
    },[postsInit,postsDidSet,setPostsDidSet])


    const handleDidRepost = (newPost) => {
      const updatePostsInit = [...postsInit]
      updatePostsInit.unshift(newPost)
      setPostsInit(updatePostsInit)
      const updateFinalPosts = [...posts]
      updateFinalPosts.unshift(posts)
      setPosts(updateFinalPosts)
    }
    return posts.map((item,index)=>{
      return <Post  
        post={item} 
        didRepost={handleDidRepost}
        className='my-5 py-5 border bg-white text-dark' 
        key={`${index}-{item.id}`} />
    })
  }


export function ActionBtn(props) {
    const {post,action,didPerformAction} = props
    const likes = post.likes ? post.likes : 0
    const className = props.className ? props.className : 'btn btn-primary btn-sm'
    const actionDisplay = action.display ? action.display : 'Action'
    
    const handleActionBackendEvent = (response,status) =>{
      console.log(response,status)
      if ((status === 200 || status === 201) && didPerformAction){
        didPerformAction(response,status)
      }
    }
    const handleClick = (event) => {
      event.preventDefault()
      apiPostAction(post.id,action.type,handleActionBackendEvent)
        
    }
    const display = action.type === 'like' ? `${likes} ${actionDisplay}` : actionDisplay
    return <button className={className} onClick={handleClick}>{display}</button>
  }
  
export function ParentPost(props){
  const {post} = props
  return post.parent ? <div className='row'>
  <div className='col-11 mx-auto p-3 border rounded'>
    <p className='mb-0 text-muted small'>Repost</p>
    <Post hideActions className={' '} post={post.parent} />
  </div>
  </div> : null
}
export function Post(props) {
    const {post,didRepost,hideActions} = props
    const [actionPost,setActionPost] = useState(props.post ? props.post : null)
    const className = props.className ? props.className : 'col-10 mx-auto col-md-6'
    
    const handlePerformAction = (newActionPost,status) => {
      if (status === 200){
        setActionPost(newActionPost)
      } else if (status === 201) {
        if (didRepost){
          didRepost(newActionPost)
        }
      }
      
    }
    
    return <div className={className}>
            <div>
              <p>{post.id} - {post.content}</p>
              <ParentPost post={post} />
            </div>
        {(actionPost && hideActions !== true) && <div className='btn btn-group'>
                <ActionBtn post={actionPost} didPerformAction={handlePerformAction} action={{type: "like",display:"Likes"}}/>
                <ActionBtn post={actionPost} didPerformAction={handlePerformAction} action={{type: "unlike",display:"Unlike"}}/>
                <ActionBtn post={actionPost} didPerformAction={handlePerformAction} action={{type: "repost",display:"Repost"}}/>
              </div>
      }
    </div>
  }

posts / lookup.js：

import {backendLookup} from '../lookup'

export function apiPostCreate(newPost,callback){
    backendLookup("POST","/posts/create/",callback,{content: newPost})
  }

export function apiPostAction(postId,callback){
    const data = {id: postId,action: action}
    backendLookup("POST","/posts/action/",data)
}
  
export function apiPostList(callback) {
    backendLookup("GET","/posts/",callback)
}

lookup / component.js：

function getCookie(name) {
  var cookieValue = null;
  if (document.cookie && document.cookie !== '') {
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i].trim();
          // Does this cookie string begin with the name we want?
          if (cookie.substring(0,name.length + 1) === (name + '=')) {
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
          }
      }
  }
  return cookieValue;
}

export function backendLookup(method,endpoint,data) {
  let jsonData;
  if (data){
    jsonData = JSON.stringify(data)
  }
  const xhr = new XMLHttpRequest()
  const url = `http://localhost:8000/api${endpoint}`
  xhr.responseType = "json"
  const csrftoken = getCookie('csrftoken');
  xhr.open(method,url)
  xhr.setRequestHeader("Content-Type","application/json")

  if (csrftoken){
    xhr.setRequestHeader("HTTP_X_REQUESTED_WITH","XMLHttpRequest")
    xhr.setRequestHeader("X-Requested-With","XMLHttpRequest")
    xhr.setRequestHeader("X-CSRFToken",csrftoken)
  }

  // xhr.setRequestHeader("X-Requested-With","XMLHttpRequest")
  // xhr.setRequestHeader("X-CSRFToken",csrftoken)

  xhr.onload = function() {
    callback(xhr.response,xhr.status)
  }
  xhr.onerror = function (e) {
    console.log(e)
    callback({"message": "The request was an error"},400)
  }
  xhr.send(jsonData)

}

此外，当我运行服务器端时，在Django上都可以很好地工作。 当我在React localhost上时，我尝试在提交后在文本字段中提交一些文本，但没有发送任何内容。当我console.log（）时，它显示在键入一些文本内容后发送了null = null。 另外，当我点击“重新发布”按钮时。我在控制台中收到此错误：components.js:45 POST http://localhost:8000/api/posts/action/ 400 (Bad Request)

有什么想法吗？为什么我的POST请求有误？