ネストされた形式のstateをpostする際の変換について

Question

APIにPOSTリクエストを送る際に、普段は{key1:value1,key2:value2}のようなstateを送っている時は上手くいくのですが、ネストされている形式(↓editData)だと失敗してしまいます。
//postデータ変換 箇所でBody:~の箇所を編集する必要があるとの認識ですが、なかなか上手くいきません.
Javascript・react初心者ですが、地道に調べながら作成しています。
ご回答お待ちしております。何卒よろしくお願いいたします。

//データ送信
  submitHandler = async () => {
    let userID = await this.props.info.user_id;
    let editData = await {
      user: {
        email: "[e-mail]"
      },
      user_information: {
        sei: "山田",
        mei: "太郎"
      }
    };
    let getData = await postUserInfo(editData, userID);
  };


//ユーザー個人情報編集
export function postUserInfo(formData, userID) {
  return post(
    `https://sample.com/user/${userID}`,
    formData
  );
}

//postデータ変換
export function post(url, params = {}) {
  let token = getToken();
  return extractData(
    fetch(url, {
      method: "POST",
      mode: "cors",
      headers: {
        Authorization: `Bearer ${token}`
      },
      body: Object.keys(params).reduce(
        (o, key) => (o.append(key, params[key]), o), //eslint-disable-line no-sequences
        new FormData()
      )
    })
  );
}

Answer 1

Ajaxの根っこにあるHTTP通信の仕様の話になりますが、
これで送れるのは単純なkey=文字列です。

重要なので2度目言いますが、送れるのは「文字列」だけです。
なので勝手にネストされると困るわけですね。

どうやってネストしたオブジェクトを送信して、
送信先のWebサーバで展開するつもりですか？
だからバックエンドの設計はどうすんねん…という話になってきます。

よくある対応の一例を考えると、
フロントエンドはdataというキーにオブジェクトを全てJSON.stringify(data)みたいにJSON文字列に変換してぶちこんでしまって、POSTで送信。
バックエンド側はPOSTで受け取り、dataキーのJSON文字列をデコードして使うのが楽なんじゃないでしょうか？

個別にやるならループさせつつ、中のネストしたオブジェクトを一つずつJSON.strinfigyで変換していく設計にしてはどうでしょうか？

Comments

[hiroakitajima]

ご回答ありがとうございます。
{data:JSON.stringify(editData)}で送ってデコードしてもらったら上手くいきました！
ありがとうございましたm_ _m

[miyabi-sun]

お役に立てたようで良かったです。
JSON文字列というのは自分勝手に好きなようにネストが出来るものなので、
どんなルールかをバックエンドの方としっかり取り決めて、ドキュメントとかも書くようにしてくださいね。

Answer 2

こんにちは。

サーバーサイドでリクエストボディの形式としてJSONを受け取ることができる（または、受け取るように修正することが可能である）ならば、

• developer.mozilla.org： Fetch 概説 - リクエストにオプションを適用する

に掲載されている、以下のサンプルコード：

// POST メソッドの実装の例

postData(`http://example.com/answer`, {answer: 42})
  .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
  .catch(error => console.error(error));

function postData(url = ``, data = {}) {
  // 既定のオプションには * が付いています
    return fetch(url, {
        method: "POST", // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, cors, *same-origin
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, same-origin, *omit
        headers: {
            "Content-Type": "application/json; charset=utf-8",
            // "Content-Type": "application/x-www-form-urlencoded",
        },
        redirect: "follow", // manual, *follow, error
        referrer: "no-referrer", // no-referrer, *client
        body: JSON.stringify(data), // 本文のデータ型は "Content-Type" ヘッダーと一致する必要があります
    })
    .then(response => response.json()); // レスポンスの JSON を解析
}

と同様に、 リクエストヘッダのContent-Type に "application/json; charset=utf-8" を指定したうえで、

body: JSON.stringify(editData)

という感じで、送信したい内容を含むオブジェクトをJSONにしてリクエストボディにするのはいかがでしょう？

参考になりましたら幸いです。