Использование вложенных объектов с react-hook-form

Я пытаюсь отправить данные на бэкэнд с помощью react-hook-form, и вот интерфейс FormData:

interface FormData {
  title: string;
  // other things
  location: {
    country: string | null;
    city: string | null;
    address: string | null;
  };
}

Проблема в том, что когда я отправляю форму и наблюдаю ее в бэкенде (django), то получается что-то вроде этого:

<QueryDict: {'title': ['CCC'], 'location': ['[object Object]']}>

Чтобы бэкэнд не устанавливал местоположение для объекта

Похоже, что проблема возникает из-за того, как я создаю объект FormData. Когда я добавляю местоположение вложенного объекта непосредственно к FormData, он преобразует его в строку '[object Object]', а это не то, что мне нужно.

Вместо этого мне нужно обрабатывать вложенные объекты отдельно. Вот как я могу настроить свою функцию onSubmit() для корректной работы с вложенными объектами:

const onSubmit = (data: FieldValues) => {
  const formData = new FormData();
  for (const key in data) {
    if (typeof data[key] === "object" && data[key] !== null) {
      // Handle nested object
      for (const nestedKey in data[key]) {
        const nestedValue = data[key][nestedKey];
        formData.append(`${key}.${nestedKey}`, nestedValue);
      }
    } else {
      formData.append(key, data[key]);
    }
  }

  const apiClient = new APIClient<FieldValues>("events/");

  apiClient
    .create(formData, { headers: { "Content-Type": "multipart/form-data" } })
    .then((res) => {
      return res.data;
    })
};
Вернуться на верх