首页 > 解决方案 > 发布我的数据时带有 Reactjs 错误请求的 Axios

问题描述

BadRequest 400尝试使用 react 和 axios 库将数据发布到 web api 时出现错误,这是我的代码:

let token = 'xxx-token';
let username = 'username';
export const PostData = (url, formData) => {
    return new Promise((resolve, reject) => {
        instance.post(`${config.externalApi}/${url}`, formData, { 
            headers: { "Authorization": `Bearer ${token}`, "X-Default-Username": username, "Content-Type": "application/json" }
         }).then(response => {
            if(response.data !== undefined && response.data !== null) {
                resolve(response.data);
            } else {
                reject(Error('no data found'))
            }
        }).catch((err) => {
            console.log(err);
        })
    })
}

样本有效载荷数据

{
    "companyId": 1286,
    "postingDate": "2021-04-27T05:20:39.253Z",
    "startDate": "2021-06-08T05:20:39.000Z",
    "endDate": "2021-04-27T05:20:39.253Z",
    "makePlacementDate": "2021-04-27T05:20:39.253Z",
    "closingDate": "2021-04-27T05:20:39.253Z",
    "inDeclare": true,
    "positionType": "Internship",
    "jobTitle": "Software Engineer Intern",
    "department": "IT Department",
    "noOfPositions": "5",
    "internshipPlacementType": "1",
    "ihlLevel": "3",
    "duration": "4 Months and 15 Days",
    "jobFunction": "9",
    "rolesAndResponsibility": "Roles and Responsibilities",
    "scopeAndOutcomes": "Learning Outcomes and Objectives",
    "skillsAndKnowledge": "Requirements",
    "actionModeType": "Submit",
    "resourceSumitId": null,
    "remarks": "",
    "recipient": "",
    "remarksBy": ""
}

我的控制器

        [Authorize]
        [HttpPost("jobposition/create")]
        public IActionResult AddJobPosition([FromBody] JobPosition position)
        {
            if(ModelState.IsValid)
            {
                var result = _jobListingService.AddJobPosition(position);
                return Created(Request.Path.Value, result);
            } 
            else
            {
                return BadRequest();
            }
        }

模型

    public class JobPosition
    {
        [Required]
        public long CompanyId { get; set; }

        [Required]
        [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
        public string PositionType { get; set; }
        
        [Required]
        [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
        public string IhlType { get; set; }
        
        [Required]
        [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
        public string JobTitle { get; set; }
        
        [Required]
        [Range(0, 1000, ErrorMessage = "Range for this field must be from 0 to 1000.")]
        public int NoOfPositions { get; set; }
        
        [Required]
        [DataType(DataType.Date)]
        public DateTime StartDate { get; set; }
        
        [Required]
        [DataType(DataType.Date)]
        public DateTime EndDate { get; set; }

        [Required]
        [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
        [DataType(DataType.Text)]
        public string Duration { get; set; }

        [Required]
        [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
        [DataType(DataType.Text)]
        public string ScopeAndOutcome { get; set; }

        [Required]
        [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
        [DataType(DataType.Text)]
        public string SkillsAndKnowledge { get; set; }

        [Required]
        [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
        [DataType(DataType.Text)]
        public string RolesAndResponsibility { get; set; }

        [Required]
        [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
        public string JobFunction { get; set; }

        [Required]
        [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
        public string Department { get; set; }

        [Required]
        [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
        public string InternshipPlacementType { get; set; }

        [DataType(DataType.Date)]
        public DateTime ClosingDate { get; set; }

        [DataType(DataType.Date)]
        public DateTime MakePlacementDate { get; set; }

        [Required]
        public bool InDeclare { get; set; }

        [DataType(DataType.Upload)]
        public byte[] ResourceSumitId { get; set; }

        // submission checker
        [Required]
        [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
        public string ActionModeType { get; set; }

        // reviewer
        [MaxLength(1000, ErrorMessage = "Exceed max length of 1000.")]
        public string Remarks { get; set; }

        [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
        public string Reciptient { get; set; }

        [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
        public string RemarksBy { get; set; }
    }

上面提到的上面是我为 web api 制作的控制器和模型。我不确定为什么数据不正确...我不确定为什么会出现某种错误,我很确定我的数据结构是正确的。

标签: javascriptc#reactjs

解决方案


希望我正确地编写了这个 DTO。

public class JobPosition
{
    [Required]
    public long CompanyId { get; set; }

    [Required]
    [DataType(DataType.Date)]
    public DateTime postingDate { get; set; }

    [Required]
    [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
    public string PositionType { get; set; }
    
    [Required]
    [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
    public string IhlType { get; set; }
    
    [Required]
    [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
    public string JobTitle { get; set; }
    
    [Required]
    [Range(0, 1000, ErrorMessage = "Range for this field must be from 0 to 1000.")]
    public int NoOfPositions { get; set; }
    
    [Required]
    [DataType(DataType.Date)]
    public DateTime StartDate { get; set; }
    
    [Required]
    [DataType(DataType.Date)]
    public DateTime EndDate { get; set; }

    [Required]
    [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
    [DataType(DataType.Text)]
    public string Duration { get; set; }

    [Required]
    [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
    [DataType(DataType.Text)]
    public string ScopeAndOutcome { get; set; }

    [Required]
    [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
    [DataType(DataType.Text)]
    public string SkillsAndKnowledge { get; set; }

    [Required]
    [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
    [DataType(DataType.Text)]
    public string RolesAndResponsibility { get; set; }

    [Required]
    [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
    public string JobFunction { get; set; }

    [Required]
    [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
    public string Department { get; set; }

    [Required]
    [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
    public string InternshipPlacementType { get; set; }

    [DataType(DataType.Date)]
    public DateTime ClosingDate { get; set; }

    [DataType(DataType.Date)]
    public DateTime MakePlacementDate { get; set; }

    [Required]
    public bool InDeclare { get; set; }

    [DataType(DataType.Upload)]
    public byte[] ResourceSumitId { get; set; }

    // submission checker
    [Required]
    [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
    public string ActionModeType { get; set; }

    // reviewer
    [MaxLength(1000, ErrorMessage = "Exceed max length of 1000.")]
    public string Remarks { get; set; }

    [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
    public string Reciptient { get; set; }

    [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
    public string RemarksBy { get; set; }
}

我不确定这是您想要的模型。但是,我发现您的数据中的字段在您的 DTO 中不存在,请注意您的 DTO。


推荐阅读