如何将对象从 React.js 传递到控制器 API？

如何解决如何将对象从 React.js 传递到控制器 API？

我是 ASP.NET 的新手，并尝试使用此技术编写我的第一个应用程序，其客户端大小是用 React.js 编写的。这是简单的 SPA，它应该从其表单发送数据并获得响应。但是每个请求都以消息结尾（“请求失败，状态码为 415”），我无法解决这个问题。

FormComponent.js 代码：

import './Form.css'
import React,{ Component } from 'react'
import axios from 'axios'

export default class Form extends Component {
    
    constructor(props){
        super(props)

        this.state={
            name: "",email: "",text: ""
        }

        this.onNameChange = this.onNameChange.bind(this);
        this.onEmailChange = this.onEmailChange.bind(this);
        this.onTextChange = this.onTextChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onNameChange(e) {
        this.setState({ name: e.target.value });
    }

    onEmailChange(e) {
        this.setState({ email: e.target.value });
    }

    onTextChange(e) {
        this.setState({ text: e.target.value });
    }

    onSubmit(e) {
        e.preventDefault();
        var commentName = this.state.name;
        var commentEmail = this.state.email;
        var commentText = this.state.text;
        if (!commentName || !commentEmail || !commentText) {
            return;
        }

        console.log(commentName);
        console.log(commentEmail);
        console.log(commentText);

        var data = new FormData();

        data.append("Name",commentName);
        data.append("Email",commentEmail);
        data.append("Text",commentText);
        axios({
            method: 'post',url: '/api/Comment',data: data,})
            .then((res) => {
                console.log(res.data);
            })
            .catch((err) => { throw err });

        this.setState({ name: "",text: "" });
        
    }

    render() {
        return (
            <section>
                <form id="my-form" onSubmit={this.onSubmit}>
                    <a id="Feedback-btn" type="submit">Нам важлива ваша думка</a>
                    <label htmlFor="in_name">Ім'я:</label>
                    <input id="in_name" type="text" onChange={this.onNameChange}/>
                    <label htmlFor="in_email">Email:</label>
                    <input id="in_email" type="email" onChange={this.onEmailChange}></input>
                    <label htmlFor="text_Feedback">Коментар:</label>
                    <textarea name="Feedback" id="text_Feedback" onChange={this.onTextChange}></textarea>
                    <button type="submit">Залиште відгук</button>
                </form>
            </section>
        )
    }
}

控制器 API 代码：

using Gazda.Models;
using Microsoft.AspNetCore.Mvc;
using System;

// For more information on enabling Web API for empty projects,visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace Gazda.Controllers
{
    [Route("/api/Comment")]
    [ApiController]
    public class CommentController : ControllerBase
    {

        [HttpPost]
        public IActionResult Post([FromBody]Comment comment)
        {

            comment.Id = Guid.NewGuid().ToString();

            return Ok(comment);
        }

        [HttpGet]
        public IActionResult Get()
        {
            return Ok("success");
        }

    }
}

和评论模型：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Gazda.Models
{
    public class Comment
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public string Text { get; set; }
    }
}

我似乎错误地将参数传递给了我的控制器 API，但我花了几个小时却找不到任何解决方案。

先谢谢你！！！！

附言对不起我的英语

解决方法

您正在向 API 控制器发布表单，但正在阅读正文。 415 错误意味着您在帖子中的数据与 API 预期的不匹配。

尝试移除 [FromBody] 装饰器或将其更改为 [FromForm]