如何在使用 axios 在发布请求中传递 ReactJS state 数据时解决问题？

Question

我在使用Axios时遇到问题。 所以，在这里我想弄清楚我在使用Axios方法时做错了什么。

反应 State 数据

这是我作为发布数据传递的数据 object。

const data = qs.stringify({
            recipe_name: inputs.recipe_name,
            total_serve: inputs.total_serve,
            ingrediants: ingrediants,
            directions: directions
        });

Axios

axios.post(
                'http://example.com/api/add', 
                { data },
                { headers: { 'content-type': 'application/x-www-form-urlencoded' }}
            )
            .then(response => {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });

回应：我已经在服务器端打印了帖子数据。 这是发布数据在服务器上没有达到预期的问题。

Array
(
    [{"data":"recipe_name] => Poha
    [total_serve] => 10
    [ingrediants] => Array
        (
            [0] => Array
                (
                    [name] => Ing 1
                    [measure] => 5
                )

        )

    [directions] => Array
        (
            [0] => Array
                (
                    [title] => Direction 1
                    [description] => abc Test Hello test"}
                )

        )

)

像这样开始

[{"data":"recipe_name] => Poha

像这样结束

[description] => abc Test Hello test"}

我期待如下结果：

Array
(
    [recipe_name] => Poha
    [total_serve] => 10
    [ingrediants] => Array
        (
            [0] => Array
                (
                    [name] => Ing 1
                    [measure] => 5
                )

        )

    [directions] => Array
        (
            [0] => Array
                (
                    [title] => Direction 1
                    [description] => abc test Hello Test
                )

        )

)

我想弄清楚我在使用 Axios 方法时做错了什么。

Answer 1

我假设你的问题在这里

const data = qs.stringify({
   recipe_name: inputs.recipe_name,
   total_serve: inputs.total_serve,
   ingrediants: ingrediants,
   directions: directions
});

您不需要将数据转换为字符串

尝试发送原始 object

const data = {
   recipe_name: inputs.recipe_name,
   total_serve: inputs.total_serve,
   ingrediants: ingrediants,
   directions: directions
};