Axios 發布請求沒有 function 反應

Question

I'm new to react and Axios and I want to send a set of data to an API using Axios in React, this is the data format in API:

{
    "company_name": "Karno",
    "title": "Devops Engineer",
    "internal_code": 856789,
    "department": 1,
    "location": 2,
    "tags": [10, 11],
    "benefits": "At Snapp, we like spending ...",
    "description": "About Snapp..." 
    "requirements": "Mandatory QualificationsStrong Linux administration skills..."
}

這是我的代碼，它將在按下按鈕時將這些數據（這些數據保存在道具中並顯示在此確認表單頁面上）發送到 API，但我的發布請求似乎不起作用，我沒有'沒有收到來自服務器的任何響應，並且在我的服務器日志中沒有看到任何 POST 請求

const headers = {
  'content-type': 'application/json',
  'Authorization': 'Token bba27954e46823f1f82ff2c89d19f5802e46fd3f'
}

export class Confirmation extends Component {
  state = {
    title: '',
    company_name: '',
    internal_code:'',
    department:'',
    location:'',
    tags:[],
    benefits:'',
    description:'',
    requirements:''
  }

  handleSubmit = event => {
    event.preventDefault();

    const job = {
      title:this.values.Title,
      company_name:this.values.Company,
      internal_code:this.values.InternalCode,
      department:this.values.Department.id,
      location:this.values.Location.id,
      tags:this.values.Tags.map(tag=>tag.id).join(', '),
      benefits:this.values.Benefits,
      description:this.values.Detailss,
      requirements:this.values.requirements
    }
    axios.post('/api/jobs/job-creation/',{headers:headers}, job)
    .then(res=> {
      console.log(res)
      console.log(res.data)
    })
  }

continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

render () {
    const {
      values: {
        Title, Benefits,
        Company, InternalCode, Detailss, Department,Tags, Salary,requirements,Location,newTags
      }
    } = this.props
 return (
    <form  onSubmit={this.handleSubmit}>
      <div className='container'>
 <div className='content'>
          <Container>
            <Row>
              <Col xs='6' sm='4' className='TextContent'>
                <Row className='TextInside'> Salary: {Salary} </Row>
                <Row>  Location: {Location.label}</Row>
                <Row>  New Tags: {newTags.join(', ')} </Row> 
              </Col>
              <Col xs='6' sm='4' className='TextContent'>
                <Row>   Company: {Company}</Row>
              // info in the {} are shown on page and need to be sent to api
                <Row>   Internal Code: {InternalCode}</Row> 
                <Row>   Pre Tags: {Tags.map(tag=>tag.label).join(", ")}</Row>
                <Row>   Department: {Department.label}</Row>  
              </Col>
              <Col xs='6' sm='4' className='TextContent'>
                <Row>   Job Title: {Title}</Row>
                <Row>   Benefits: {Benefits}</Row>
              </Col>
            </Row>
          </Container>
        </div>
       <div className='Detailss' style={{width:'1000px'}}>
         {Detailss}
       </div> 
<div className='req'>
       {requirements}
      </div>


      //buttons
      <div className='buttons-container' style={{position:'relative',bottom:'20px'}}>
       <button onClick={this.back} className='previous'>قبلی</button> 
       <button type='submit' onClick={this.continue} className='next'>ادامه</button>
     </div>

     </Container>
     </Container>
    </div>
    </form>

我在這里做錯了什么？

Answer 1

在觸發表單的 onSubmit 處理程序之前，提交按鈕上的 onClick 偵聽器會觸發重定向。 移除 onClick 監聽器並將 this.continue() 移至 post 請求的.then 回調。

此外，從 continue 方法和 e.preventDefault 中刪除“e”參數，並將作業 object 中的 this.values 更改為 this.props.values。