Ремикс Отправить объект

Как правильно отправить объект в ремикс с помощью useSubmit()? Нужно ли мне сначала это сделать? Тогда JSON.stringify() оно в действии?

Мой код ниже работает, но не уверен, что это лучший способ?

onSubmit()

const onSubmit = () => {

    const updatedContact = {
        name: "John Doe",
        email: "",
    };

    const updatedOrder = {
        products: [
            {
                id: 1,
                name: "Product 1",
                quantity: 1,
            },
            {
                id: 2,
                name: "Product 2",
                quantity: 2,
            },
        ],
        total: 100,
    };

    const product = JSON.stringify(updatedContact);
    const order = JSON.stringify({
        updatedOrder: updatedOrder,
    });

    const formData = {
        id,
        product,
        order,
    };

    submit(formData, { method: "post", encType: "multipart/form-data" });
};

действие

export const action: ActionFunction = async ({
    request
}: ActionFunctionArgs) => {
    const formData = await request.formData();

    const {
        id,
        product,
        order,
    } = Object.fromEntries(formData) as {
        [k: string]: string;
    };

    console.info({
        id,
        product: JSON.parse(product),
        order: JSON.parse(order),
    })

};

нет, тебе это не нужно. в любом случае, если хочешь, то можешь это сделать)

Igor Zinchenko 18.05.2024 10:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
110
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Теперь вы можете использовать JSON напрямую, а не всегда использовать данные формы.

submit({ id, product, order }, { method: 'post', encType: 'appliction/json' })

function action({ request} ) {
  const { id, product, order } = await request.json()
  //...
}

https://remix.run/docs/en/main/hooks/use-submit#options

Нужно ли мне еще JSON.stringify() когда submit? и JSON.parse() в действиях?

Joseph 21.05.2024 19:50

Нет, просто передайте объект в качестве первого аргумента submit

Kiliman 21.05.2024 22:06

Странный. Почему я получаю эту ошибку? TypeError: Content-Type was not one of "multipart/form-data" or "application/x-www-form-urlencoded". Я использую @remix-run/cloudflare

Joseph 22.05.2024 09:26

Какая у вас версия Ремикса? Тип application/json был добавлен в версии 1.18.0 github.com/remix-run/remix/releases/tag/remix%401.18.0

Kiliman 23.05.2024 14:22

Я использую "@remix-run/cloudflare": "^2.9.1" и @remix-run/react": "^2.9.1". Ошибка возникает в actions, когда я консолью ее записываю.

Joseph 23.05.2024 14:54

Хорошо, а как вы анализируете тело запроса? Вы используете request.json() или все еще используете request.formData()?

Kiliman 23.05.2024 16:12

Я понимаю. Спасибо. То есть вам нужно будет изменить request.formData() только в том случае, если вы решите НЕ использовать application/json?

Joseph 24.05.2024 14:15

Другие вопросы по теме