Как отправить динамическую форму в axios

@I am i · Регистрация: 28.03.2023

Студворк — интернет-сервис помощи студентам

Добрый день!!!
Есть динамическая форма:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<h1>Add Stage</h1>
            <form className={classes.root} onSubmit={handleSubmit}>
                {inputFields.map((inputField, index) => (
                    <div key={index}>
                        <TextField
                            placeholder="Enter name job"
                            name="name_work"
                            label="Name Job"
                            value={inputField.name_work}
                            onChange={event => handleChangeInput(index, event)}
                        />
                        <TextField
                            name="release_dates"
                            label="Release Dates"
                            value={inputField.release_dates}
                            onChange={event => handleChangeInput(index, event)}
                        />
                        <TextField
                            name="due_dates"
                            label="Due Dates"
                            value={inputField.due_dates}
                            onChange={event => handleChangeInput(index, event)}         
                        />                            
                        <IconButton
                            onClick={()=> handleRemoveFields(index)}
                        >
                            <RemoveIcon />
                        </IconButton>
                        <IconButton
                            onClick={() => handleAddFields()}
                        >
                            <AddIcon />
                        </IconButton>
                    </div>
                ))}
                <Button 
                    className={classes.button}
                    variant="contained" 
                    color="primary" 
                    type="submit" 
                    endIcon={<Icon>send</Icon>} 
                    // onClick={AddWorksInfo}
                    onClick={handleSubmit}
                >
                        Add Stage
                </Button>
            </form>

Хочу отправить данные на api rest. Как поступить в случае обычной(нединамической) формы - вопросов нет(код ниже):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 const handleSubmit = async(e) => {
        
        let formField = new FormData()
 
        formField.append('name_work', inputFields.name_work)
        formField.append('release_dates', inputFields.release_dates)
        formField.append('due_dates', inputFields.due_dates)
 
        await axios({
            method: 'post',
            url: 'http://localgost:8000/work/',
            data: formField
        }).then((response) => {
            console.log(response.data);
            navigate('/Works', {replace: true});
        })
    };

Да, я действительно не могу отправить данные динамической формы. Может надо было сделать так (да, это не работает, однако идея может такая):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 let formField = new FormData()
       {inputFields.map((inputField, index) => (
 
            formField.append('name_work', inputFields.name_work),
            formField.append('release_dates', inputFields.release_dates),
            formField.append('due_dates', inputFields.due_dates)
 
        ))}
 
 
        await axios({
            method: 'post',
            url: 'http://localgost:8000/work/',
            data: formField
        }).then((response) => {
            console.log(response.data);
            navigate('/Works', {replace: true});
        })

Не знаю как присвоить каждой группе этого динамического массива уникальные ключи, ведь проблема в следующем - "Each child in a list should have a unique "key" prop."

Помогите пожалуйста)

@I am i · 28.03.2023, 21:31 **[ТС]**

Добрый день!
Подскажите как отправить данные из динамической формы на api rest.
А если конкретно, не работает код, приведенный ниже:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
const handleSubmit = async(e) => {
        e.preventDefault();
        console.log("InputFields", inputFields);
       
        await axios({
            method: 'post',
            url: 'http://localhost:8000/work/',
            data: inputFields
        }).then((response) => {
            console.log(response.data);
            navigate('/Works', {replace: true});
        })
    };

Где метод handleSubmit вызывается при нажатии кнопки формы "Отправить".
inputFields имеет следующий вид:

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

-Это структура динамической формы.
Ниже приведен код динамической формы:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<h1>Add Stage</h1>
            <form className={classes.root} onSubmit={handleSubmit}>
                {inputFields.map((inputField, index) => (
                    <div key={index}>
                        <TextField
                            placeholder="Enter name job"
                            name="name_work"
                            label="Name Job"
                            value={inputField.name_work}
                            onChange={event => handleChangeInput(index, event)}
                        />
                        <TextField
                            name="release_dates"
                            label="Release Dates"
                            value={inputField.release_dates}
                            onChange={event => handleChangeInput(index, event)}
                        />
                        <TextField
                            name="due_dates"
                            label="Due Dates"
                            value={inputField.due_dates}
                            onChange={event => handleChangeInput(index, event)}         
                        />                            
                    </div>
                ))}
                <Button 
                    className={classes.button}
                    variant="contained" 
                    color="primary" 
                    type="submit" 
                    endIcon={<Icon>send</Icon>} 
                    // onClick={AddWorksInfo}
                    onClick={handleSubmit}
                >
                        Add Stage
                </Button>
            </form>

В консоле на странице при отправки выводится InputFields (прикрепила фото).

Я пробовала делать перебором массива, код ниже:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
inputFields.forEach(function(entry) {
                formField.append('id', entry.id);
                formField.append('name_work', entry.name_work);
                formField.append('release_dates', entry.release_dates);
                formField.append('due_dates', entry.due_dates);
        });
 
        await axios({
            method: 'post',
            url: 'http://localhost:8000/work/',
            data: inputFields
        }).then((response) => {
            console.log(response.data);
            navigate('/Works', {replace: true});
        })

-Однако при таком способе, который я привела выше - в бд записываются данные только последней формы из их динамического количества.

Подскажите пожалуйста, не знаю я уже что сделать

@vxg · 29.03.2023, 08:56

I am i, что делает handleChangeInput ? кажется он должен вызывать setInputFields. в этом случае handleSubmit отработает как надо

@I am i · 31.03.2023, 15:55 **[ТС]**

Именно так у меня все и есть. Вот handleChangeInput:

JavaScript
1
2
3
4
5
6
const handleChangeInput = (index, event) => {
        // console.log(index, event.target.name)
        const values = [...inputFields];
        values[index][event.target.name] = event.target.value;
        setInputFields(values);
    }

Однако handleSubmit не работает как надо.

@I am i · 31.03.2023, 16:10 **[ТС]**

Вот в методе axios в data записываю values (

JavaScript
1
const values = [...inputFields];

)

JavaScript
1
2
3
4
5
6
7
8
await axios({
            method: 'post',
            url: 'http://localhost:8000/work/',
            data: values
        }).then((response) => {
            console.log(response.data);
            navigate('/Works', {replace: true});
        })

Однако вот что я вижу в консоли (прикрепила рисунок)

@mr_dramm · 31.03.2023, 16:16

А так?

JavaScript
1
data: {payload: inputFields}

@I am i · 31.03.2023, 16:35 **[ТС]**

К сожалению, опять ошибка (рисунок).

@I am i · 31.03.2023, 17:47 **[ТС]**

Может стоит в цикле перебрать, что-то вроде этого:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const handleSubmit = async(e) => {
        e.preventDefault();
        console.log("InputFields", inputFields);
 
        let formField = new FormData()
 
        var array = [];
 
        inputFields.forEach(function(entry) {
                formField.append('id', entry.id);
                formField.append('name_work', entry.name_work);
                formField.append('release_dates', entry.release_dates);
                formField.append('due_dates', entry.due_dates);
        });
 
        await axios({
            method: 'post',
            url: 'http://localhost:8000/work/',
            // data: formField
            // data: {payload: inputFields}
            data: values
        }).then((response) => {
            console.log(response.data);
            navigate('/works', {replace: true});
        })

Но при таком раскладе запоминаются только последние данные. Так что наверно не подходит такой вариант

@mr_dramm · 31.03.2023, 18:20

я выше советовал просто пальцем в небо, трудно понять в чем проблема

Хорошо что с формой у Вас отправляется

я эксперементировал с тестовыми данными

мой тестовый сервер для приема формы

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const express = require("express");
var bodyParser = require("body-parser");
var cors = require("cors");
const app = express();
const port = 4000;
const multer = require("multer");
app.use(
  cors({
    origin: "*",
  })
);
 
app.post("/form", multer().none(), (req, res) => {
  console.log("Body");
  console.dir(req.body, { depth: null });
});
 
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

на клиенте

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    let formField = new FormData()
    let inputFields = []
    for (let i = 0; i < 10; i++) {
        formField.append('id[]', i);
        formField.append('name_work[]', "work"+i);
        formField.append('release_dates[]', new Date());
    }
    axios({
        method: 'post',
        url: 'http://localhost:4000/form/',
        data: formField
    }).then((response) => {
        console.log(response.data);
    }).catch(function(error) {
        console.log('Error', error.message);
    })

данные на сервере

JavaScript
1
2
3
4
5
6
7
8
9
{
  id: [ '0', '1', '2' ],
  name_work: [ 'work0', 'work1', 'work2' ],
  release_dates: [
    'Fri Mar 31 2023 18:14:12 GMT+0300 (Moscow Standard Time)',
    'Fri Mar 31 2023 18:14:12 GMT+0300 (Moscow Standard Time)',
    'Fri Mar 31 2023 18:14:12 GMT+0300 (Moscow Standard Time)'
  ]
}

еще можно так отправить данные через форму на клиенте

JavaScript
1
2
3
    for (let i = 0; i < 3; i++) {
        formField.append(i, JSON.stringify({id: i, name_work: "work" + i, 'release_dates': new Date()}));
    }

на сервере получим

JavaScript
1
2
3
4
5
{
  '0': '{"id":0,"name_work":"work0","release_dates":"2023-03-31T15:14:12.534Z"}',
  '1': '{"id":1,"name_work":"work1","release_dates":"2023-03-31T15:14:12.534Z"}',
  '2': '{"id":2,"name_work":"work2","release_dates":"2023-03-31T15:14:12.534Z"}',
}

мой сервер получает все днные, скорее всего у вас проблема либо с настройкой сервера или обработкой принятых данных либо с отправкой

еще можно в испекторе браузера на вкладке network посмотреть что реально отправилось смотри прикрепленный файл

================
На счет ошибки 400
нужно понять что вызывает http 400, тут есть несколько советов

прежде всего добавьте блок перехвата ошибок catch

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    axios({
        method: 'post',
        url: 'http://localhost:4000/json1/',
        data: [{ id: { data: [new Date("Thu, 28 Apr 2016 22:02:17 GMT")] } }, { id: "232323" }]
 
 
    }).then((response) => {
        console.log(response.data);
    }).catch(function(error) {
        console.log('Error', error.message);
    })

и покажите что вывелось в косоли.

Я сделал тестовый пример и у меня отправляется все без проблем и массивы и объекты и вообще любые данные

JavaScript
1
2
3
4
5
6
7
    axios({
        method: 'post',
        url: 'http://localhost:4000/json/',
        data: [{ id: { data: [new Date("Thu, 28 Apr 2016 22:02:17 GMT")] } }, { id: "232323" }]
    }).then((response) => {
        console.log(response.data);
    })

на моем сервере

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const express = require("express");
var bodyParser = require("body-parser");
var cors = require("cors");
const app = express();
const port = 4000;
const multer = require("multer");
app.use(
  cors({
    origin: "*",
  })
);
 
var jsonParser = bodyParser.json();
 
app.post("/json", jsonParser, (req, res) => {
  console.log("Body");
  console.dir(req.body, {depth: null})
 
  res.send({ response: "JSON!" });
});
 
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

все принялось без проблем.

Code
1
2
Body
[ { id: { data: [ '2016-04-28T22:02:17.000Z' ] } }, { id: '232323' } ]

Если предполагать что ошибка в json

#1

предположим что есть какая то проблема с конвертацией или с размером json

выполни следующие действия

JavaScript
1
2
3
4
5
6
7
8
9
10
11
const inputFields = [12];
 
try{
    const inputFieldsLength = JSON.stringify(inputFields).length
    console.log("inputFieldsLength", inputFieldsLength)
 
    JSON.parse(JSON.stringify([new Date()]))
}
catch(err){
    console.log("JSON parse error: ", err.message)
}

покажи что в консоли

#2

можно попробвать использовать serialize-javascript

JavaScript
1
2
3
4
5
import serialize from "serialize-javascript";
 
sanitizeResult = JSON.parse(
                            serialize(inputFields, { isJSON: true })
                        );

и отправлять sanitizeResult.

@I am i · 31.03.2023, 19:24 **[ТС]**

Выдал следующее:

@mr_dramm · 31.03.2023, 21:14

Сообщение от I am i

Выдал следующее:

это очень не информативно знаете ли, но в ошибке сообщается что некая переменная protocol в файле ShowAndAddWorks.js в строке 119 почему то undefined. Этой переменной в вашем коде вообще не видно, видимо это другой файл.

Вы лучше напишите что было сделано чтобы получить такую ошибку.

Добавлено через 7 минут
и напишите какие из моих советов вы попробовали, и что показывает инспектор в браузере на вкладке network

@I am i · 01.04.2023, 15:07 **[ТС]**

Возможно мне бы еще стоило расписать серверную часть для понимания:

Serializer:

JavaScript
1
2
3
4
5
6
7
8
9
class WorkSerializer(serializers.ModelSerializer):
    class Meta:
        model = Work
        fields = [
            'id',
            'name_work',
            'release_dates',
            'due_dates'
        ]

Views:

JavaScript
1
2
class WorkView(viewsets.ModelViewSet):
    serializer_class = WorkSerializer

И urls.py:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
from rest_framework import routers
 
 
routerWork = routers.DefaultRouter()
 
 
routerWork.register("", WorkView, basename="workview")
 
 
urlpatterns = [
    path('work/', include((routerWork.urls, 'workview'))),
]

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@vxg Модератор 3407 / 2178 / 354 Регистрация: 13.01.2012 Сообщений: 8,448
	29.03.2023, 08:56
	I am i, что делает handleChangeInput ? кажется он должен вызывать setInputFields. в этом случае handleSubmit отработает как надо 0

@I am i 0 / 0 / 0 Регистрация: 28.03.2023 Сообщений: 34
	31.03.2023, 16:35 [ТС]
	К сожалению, опять ошибка (рисунок). Миниатюры 0

@I am i 0 / 0 / 0 Регистрация: 28.03.2023 Сообщений: 34
	31.03.2023, 19:24 [ТС]
	Выдал следующее: Миниатюры 0