我正在嘗試使用 fetch 將一些表單資料發布到帶有 React 的 .Net Core Web Api。我能夠在控制器操作中打斷點，但發布資料始終為空。任何想法為什么？
注冊.js
import React, { Component } from 'react';
export class Register extends Component {
static displayName = Register.name;
constructor(props) {
super(props);
this.state = {
userName: '',
password: '',
confirmPassword: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
handleSubmit(event) {
event.preventDefault();
let formData = new FormData();
formData.append("UserName", this.state.userName);
formData.append("Password", this.state.password);
formData.append("ConfirmPassword", this.state.confirmPassword);
fetch("api/account/register", {
method: "POST",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
}).then(response => response.json())
.then(data => console.log(data));
}
render () {
return (
<div>
<h1>Register</h1>
<form onSubmit={this.handleSubmit}>
<div className="mb-3">
<label for="username" className="form-label">UserName</label>
<input type="text" className="form-control" name="userName" value={this.state.userName} onChange={this.handleChange} />
</div>
<div className="mb-3">
<label for="password" className="form-label">Password</label>
<input type="password" className="form-control" name="password" value={this.state.password} onChange={this.handleChange} />
</div>
<div className="mb-3">
<label for="confirmPassword" className="form-label">Confirm Password</label>
<input type="password" className="form-control" name="confirmPassword" value={this.state.confirmPassword} onChange={this.handleChange} />
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
);
}
}
AccountController.cs
[ApiController]
[Route("api/[controller]")]
public class AccountController : ControllerBase
{
[HttpPost]
[Route("register")]
public IActionResult Register([FromForm] RegisterRequest request)
{
return Content("Controller call successful");
}
}
public class RegisterRequest
{
public string? UserName { get; set; }
public string? Password { get; set; }
public string? ConfirmPassword { get; set; }
}
uj5u.com熱心網友回復：
不要設定內容型別標頭。
fetch("api/account/register", {
method: "POST",
body: formData
}).then(response => response.json())
.then(data => console.log(data));
要么
fetch("api/account/register", {
method: "POST",
headers: {'Content-Type': 'multipart/form-data'}
body: formData
}).then(response => response.json())
.then(data => console.log(data));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/428783.html
標籤：反应 asp.net-mvc asp.net 核心
上一篇：如何顯示來自每個物件的請求總數