reactjs - isomorphic-unfetch は、NextJs の反応コンポーネントで 400 の不正な要求をスローします

Question

選択ボックスの onChange イベントで、Next.js の React コンポーネントの API からデータを取得しようとしています。isomorphic-unfetch モジュールを使用して、外部 API をヒットさせています。しかし、このヒットをするたびに、400 の悪い要求を受け取ります。郵便配達員で同じデータセットを使用してヒットを試みましたが、正しく機能しますが、コードでは機能しません。

編集: ヒットする URL の宣言の後に書き込まれる JSON データが送信されていないことがわかりました。つまり、この中で

fetch("https://loyalty.xgate.com/customer/w1/redeemable_cash_preview", {
        method: 'POST',
        formData : hitData,
        headers: {
          "Content-type":"application/x-www-form-urlencoded",
          'Accept': 'application/json'
        }
      })

URL https://loyalty.xgate.com/customer/w1/redeemable_cash_previewのみがヒットしていますが、メソッド、formData、またはヘッダーはリクエストに対応していません。

これは私が使用しているコンポーネントです。

  import React, { Component } from 'react';
    import css from '../../redeemPopUp.css';
    import Link from 'next/link';
    import fetch from 'isomorphic-unfetch';
    import CashPreview from '../../pages/cashPreview';

    class Preview extends Component {
        state = {
            value: ""
          }

        cash = (id, event) =>{

          var hitData = {
            "account_id": "XXXX",
            "username": "XXXX",
            "password": "XXXX",
            "code": id,
            "points_to_redeem":event.target.value
          };

          fetch("https://loyalty.xgate.com/customer/w1/redeemable_cash_preview", {
            method: 'POST',
            formData : hitData,
            headers: {
              "Content-type":"application/x-www-form-urlencoded",
              'Accept': 'application/json'
            }
          })
          .then(function (result){
            console.log(result)        
          }).catch((err) => console.log(err))
        }


        render() { 
            return (
                <div>
                    <div className={css.modal_body}>

                    <div className={css.loyalty_row}>
                        <label

 className={css.tier_label} >Redeem Points:</label>
                    <select name="redeemPoints" onChange={(e)=>this.cash(this.props.id, e)}>
                        <option value="25000">25000</option>
                        <option value="20000">20000</option>
                        <option value="15000">15000</option>
                        <option value="10000">10000</option>
                        <option value="5000">5000</option>
                    </select>
                    {/* <div className={css.sep_line}></div> */}
                </div>
                <div className={css.loyalty_row}>
                    <label className={css.tier_label} >Redeem Points:</label>
                    <span className={css.tier_values}><strong>{this.state.value}</strong></span>      
                    <div className={css.sep_line}></div>
                </div>


                <div className={css.modal_footer}>
                    <Link href="#"><a href="#" className={css.btn} id="btn_ingresar">Redeem Points</a></Link>
                </div>
            </div>
            </div>
        );
    }
}

export default Preview;

これは私のnextJsページです

import Preview from "../components/Preview/Preview";
import {withRouter} from "next/router";  

const CashPreview = (props) =>{
    const {router} = props;
    console.log(router)
    return (
        <div>
            <Preview id= {router.query.id}/>
        </div>
    )
};

export default withRouter(CashPreview)

これが私が応答して得ているもののイメージです。