使用 AXIOS 使用 React 发布到 c# API 时出错。未保存数据

Error while Post to c# API with React using AXIOS. Data is not being saved

提问人:f_dippiton 提问时间:11/12/2023 更新时间:11/12/2023 访问量:21

问:

我目前正在开发一个 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);
        }
C# 反应JS ASP.NET-WEB-API

评论

0赞 DuckDuckGoose 11/20/2023
您的 return 语句应该位于 try 块内,只有在未发现错误时才应执行该块。

答: 暂无答案