Блог

Главная - Вопросы по программированию - Реагирует как «неопределенный» при публикации с помощью axios

Реагирует как «неопределенный» при публикации с помощью axios

#reactjs #post #axios

#reactjs #Публикация #axios

Вопрос:

Здравствуйте, я пытаюсь передать некоторые данные в свой API с помощью axios и react, но я продолжаю получать неопределенные данные. я не могу найти свою ошибку, что я делаю неправильно, был бы признателен за некоторую помощь.

я использую 2 компонента, один для обработки входных данных, которые, кажется, работают, я вижу поля, заполненные данными

 import { useState } from 'react'

export const useForm = (initialValues) => {
    const [values, setValues] = useState(initialValues);

    return [
        values,
        e => {
            setValues({
                ...values,
                [e.target.name]: e.target.values
            });

        }
    ]
}

и компонент, в котором вызывается мой API

 import "../Admin/admin.css";
import Axios from "axios";

import { useForm } from "./useForm";
// Displays booking with a person added.
const AddBookableTime = () => {
    const [values, handleChange] = useForm({ startTime: '', endTime: '' })
    const API_ENDPOINT = "https://localhost:44387/api/BookableHours";

    const PostBookingTimes = async (e) => {
        e.preventDefault()
        let times = createBookingTimes(e);
        try {
            await Axios.post(`${API_ENDPOINT}`, times);

        } catch (err) {

        }
    };
    //Creating object to send to api
    const createBookingTimes = (e) => {
        let bookableHours = {
            startTime: e.target.values.startTime,
            endTime: e.target.values.endTime,
        };
        return bookableHours;
    };


    return (
        <>
            <form onSubmit={(e) => PostBookingTimes(e)}>

                <input type="text" name="startTime" value={values.startTime} onChange={handleChange} ></input>

                <input type="text" name="endTime" value={values.endTime} onChange={handleChange} ></input>
                <button type="submit" value="Post" className="booking-button">
                    Lägg till ny bokningsbar tid
            </button>
            </form>


        </>
    );

}

export default AddBookableTime;

Комментарии:

1. `${API_ENDPOINT}` может быть заменен на API_ENDPOINT !

2. ваш createBookingTimes метод не является необходимым. при отправке вы хотите передать значения, сохраненные в вашем состоянии. ваш пост должен быть await Axios.post(API_ENDPOINT, values);

3. ну, вы не указали, где вы получаете неопределенный. кстати, я считаю e.target.values , что в вашей форме использования должно быть единственное число [e.target.name]: e.target.value

4. должно быть e.target.value, а не e.target.values.. попробуйте const {name, value} = e.target; setValues({ …values, [name]: value });

5. не используйте e.target.value внутри асинхронной функции, вместо этого сохраните значение внутри переменной, а затем [name]: value .