如何在使用 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
};