Как передать данные динамической формы на api rest

Question

Прошу помощи. Я нигде не смогла найти ответа, неужели никто с этим не сталкивался. У меня не получается передать данные динамической формы в axios. С помощью структуры, которую я привела ниже, записывается только последний элемент формы, а не все:

const handleSubmit = async(e) => {
    e.preventDefault();
    console.log("InputFields", inputFields);

    let formField = new FormData();

    const values = [...inputFields];        

    {inputFields.map((inputField, index) => (
        // formField.append('id', index),
        formField.append('name_work', values[index]["name_work"]),
        formField.append('release_dates', values[index]["release_dates"]),
        formField.append('due_dates', values[index]["due_dates"])
    ))};



    await axios({
        method: 'post',
        url: 'http://localhost:8000/work/',
        data: formField
    }).then((response) => {
        console.log(response.data);
        navigate('/works', {replace: true});
    })
};

Хоть я и присваиваю это все в массиве. Метод handleSubmit реагирует на нажатие кнопки "Отправить форму". Также у меня есть метод handleChangeInput(его код приведу ниже), однако если я меняю в axios data на values(data: values), где values хранит в себе все значения динамической формы, то ничего все равно не отправляется, хотя должно!! Я не понимаю почему у меня ничего не выходит. Помогите. Прошу.

Метод handleChangeInput:

const handleChangeInput = (index, event) => {
    event.preventDefault();
    // console.log(index, event.target.name)
    const values = [...inputFields];
    values[index][event.target.name] = event.target.value;
    setInputFields(values);
}

Массив inputFields:

const [inputFields, setInputFields] = useState([
    { name_work: '', release_dates: '', due_dates: '' },
]);

Answer 1

Готово, решил Вашу проблему.

Я упростил Ваш репозиторий и на его основе создал свой отдельный репозиторий: https://github.com/ioszhuk/react_job_app + дублирую тут часть кода из репозитория, которая решает Вашу проблему:

import React, {useState, useEffect} from 'react';
import axios from 'axios';

export const ShowANDAddJobs = () => {

    const [jobs, setJobs] = useState([]);

    const [inputFields, setInputFields] = useState([]);

    const getJobs = async () => {

        try {

            const response = await axios.get('http://localhost:8000/job');

            setJobs(response.data);

        } catch (e) {
            console.log(e.message);
        }

    }

    useEffect(() => {
        getJobs();
    }, []);

    useEffect(() => {

        if (inputFields.length === 0) {
            addField(); // add first field if "inputFields" data is empty
        }

    }, [inputFields]);

    const addField = (name_job = '', release_dates = '', due_dates = '') => {

        const id = Date.now();

        const inputField = {id, name_job, release_dates, due_dates};

        setInputFields([...inputFields, inputField]);

    }

    const handleSubmit = async (e) => {
        e.preventDefault();

        // filtering "inputFields" data on empty inputs
        const filteredFields = inputFields.filter(({name_job, release_dates, due_dates}) => {
            return !!(name_job.trim().length || release_dates.trim().name_job || due_dates.trim().length);
        })

        // if "filteredFields" is empty - don't send request to the server
        if (filteredFields.length === 0) {
            return;
        }

        try {

            const response = await axios.post('http://localhost:8000/job', filteredFields);

            console.log('response', response.data);

            getJobs(); // fetch the new set of jobs

            setInputFields([]); // reset "inputFields"

        } catch (e) {
            console.log('Error', e.message);
        }

    };

    const handleChangeInput = (id, event) => {

        const copyOfInputFields = [...inputFields];

        const updatedField = copyOfInputFields.map((inputField) => {

            if (inputField.id === id) {
                inputField[event.target.name] = event.target.value;
            }

            return inputField;
        });

        setInputFields(updatedField);

    }

    const handleAddFields = () => {
        addField();
    }

    const handleRemoveFields = (id) => {

        if (inputFields.length > 1) {
            setInputFields(inputFields.filter((inputField) => inputField.id !== id));
        }

    }

    return (
        <div>

            <h1>Add Job</h1>

            <form onSubmit={handleSubmit}>
                {
                    inputFields.map(({id, name_job, release_dates, due_dates}) => (
                        <div className="form_fields" key={id}>

                            <input
                                type="text"
                                className="form_fields__input"
                                name="name_job"
                                placeholder="Enter name job"
                                value={name_job}
                                onChange={event => handleChangeInput(id, event)}
                            />

                            <input
                                type="text"
                                className="form_fields__input"
                                name="release_dates"
                                placeholder="Release Dates"
                                value={release_dates}
                                onChange={event => handleChangeInput(id, event)}
                            />

                            <input
                                type="text"
                                className="form_fields__input"
                                name="due_dates"
                                placeholder="Due Dates"
                                value={due_dates}
                                onChange={event => handleChangeInput(id, event)}
                            />

                            <button type="button" className="form_fields__delete_btn"
                                    onClick={() => handleRemoveFields(id)}>Delete
                            </button>

                            <button type="button" className="form_fields__add_btn" onClick={handleAddFields}>Add
                            </button>

                        </div>
                    ))
                }

                <br/>

                <button type="submit">Add Stage</button>

            </form>

            <br/>

            <hr/>

            <br/>

            <h1>All Jobs</h1>

            <br/>

            <div className="job_list">
                {
                    jobs.map(({id, name_job, release_dates, due_dates}) => (
                        <div key={id} className="job_item">
                            <p><b>Name job:</b> {name_job}</p>
                            <p><b>Release date:</b> {release_dates}</p>
                            <p><b>Due date:</b> {due_dates}</p>
                        </div>
                    ))
                }
            </div>

        </div>
    );

};

БЛОГ НА HUSL

Как передать данные динамической формы на api rest

Ответы (1 шт):