提问人:f_dippiton 提问时间:11/12/2023 更新时间:11/12/2023 访问量:21
使用 AXIOS 使用 React 发布到 c# API 时出错。未保存数据
Error while Post to c# API with React using AXIOS. Data is not being saved
问:
我目前正在开发一个 React 组件,该组件需要使用 Axios 将 JSON 数据发送到 C# API 端点。尽管 API 响应“Guardado exitosamente”(已成功保存),但数据未保存在数据库中。
尽管在控制台中收到“已成功保存”消息,但数据并未保留在数据库中。
我将不胜感激有关如何排除和解决此问题的任何见解或建议。
React 组件
import React, { useState, useEffect } from 'react';
import axios from 'axios';
export function CrearListaRegalos() {
const [formData, setFormData] = useState({
LisRegNombre: '',
LisRegFecCreacion: '',
LisRegUsuarioId: 6, // Debes proporcionar el usuario correcto
LisRegLisPrivId: 0, // Debes proporcionar el ID correcto
LisRegEstatus: 'A',
});
const [privacidadDropdown, setprivacidadDropdown] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const [listaPrivacidadResponse] = await Promise.all([
fetch("http://localhost:5106/listaPrivacidad").then(response => response.json())
]);
setprivacidadDropdown(listaPrivacidadResponse);
/*console.log("Lista de Privacidad:", listaPrivacidadResponse);*/
} catch (error) {
console.error('Error al obtener datos:', error);
}
};
const fechaActual = new Date().toISOString().split('T')[0]; // Formato YYYY-MM-DD
setFormData({
...formData,
LisRegFecCreacion: fechaActual,
});
fetchData();
}, []);
const handleInputChange = (event) => {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
};
const handleSubmit = async (event) => {
event.preventDefault();
try {
const response = await axios({
method: 'post',
url: 'http://localhost:5106/listaRegalos',
data: { formData }
});
console.log('Guardado exitosamente:', response.config.data)
} catch (error) {
console.error('Error al realizar la solicitud:', error);
}
};
return (
<div className="row d-flex justify-content-center">
<div className="col-6">
<h2>Crear Lista de Deseos</h2>
<form onSubmit={handleSubmit}>
<div className="mb-3">
<label>Nombre de la Lista:</label>
<input
className="form-control"
type="text"
name="LisRegNombre"
value={formData.LisRegNombre}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
<label>Selecciona privacidad</label>
<select
className="form-control"
name="LisRegLisPrivId"
value={formData.LisRegLisPrivId}
onChange={handleInputChange}
>
{/*<option value="">Selecciona...</option>*/}
{privacidadDropdown.map((opcion) => (
<option className="text-black" key={opcion.lisPrivId} value={opcion.lisPrivId}>
{opcion.lisPrivPrivacidad}
</option>
))
}
</select>
</div>
<div>
<button className="btn btn-primary" type="submit">Crear Lista</button>
</div>
</form>
</div>
</div>
);
}
客户端应用中的终结点
// POST: ListaRegalosController/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create([FromBody] ListaRegalo listaRegalo)
{
string baseApiUrl = _configuration.GetSection("WishlistApi").Value!;
Console.WriteLine(listaRegalo);
try
{
var response = await httpClient.PostAsJsonAsync<ListaRegalo>($"{baseApiUrl}/listaRegalos", listaRegalo);
if (response.IsSuccessStatusCode)
{
return StatusCode(StatusCodes.Status200OK);
}
else
{
var errorMessage = await response.Content.ReadAsStringAsync();
Console.WriteLine("Response Content: " + errorMessage);
}
}
catch (HttpRequestException ex)
{
ModelState.AddModelError(String.Empty, "Error de conexión: " + ex.Message);
}
catch (JsonException ex)
{
ModelState.AddModelError(String.Empty, "Error al deserializar los datos: " + ex.Message);
}
catch (Exception ex)
{
Console.WriteLine("Error: " + ex.ToString());
ModelState.AddModelError(String.Empty, "Error: " + ex.Message);
}
return StatusCode(StatusCodes.Status200OK, listaRegalo);
}
答: 暂无答案
评论