Question

我是React和Axios的新手，我想使用React中的Axios将一组数据发送到API，这是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（这些数据保存在props中并显示在此确认表单页面上）到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

您的“提交”按钮上的onClick侦听器触发重定向，然后触发表单的onSubmit处理程序。删除onClick侦听器，然后将this.continue（）移至.post请求后的回调中。

另外，从continue方法和e.preventDefault中删除“ e”参数，然后在作业对象中将此this.values更改为this.props.values。

Axios发布请求无法运行React

1 个答案: