REACT クエリーパラメーターでAPIが叩けない

前提・実現したいこと

日付をyyyy/mm/ddに変換を行い、APIを叩きたいです。
日付yyyy-mm-ddをyyyy/mm/ddに変換することはできたのですが、APIにリクエストを出すことができません

発生している問題・エラーメッセージ

エラーメッセージは出てません、思うような挙動をしません

該当のソースコード

javascript
1const formatDate=(dt) => {
2        return dt.replace(/-/g,'/');
3      };
4    const handleOnClick = event => {
5        event.preventDefault();
6        const checkinday=formatDate(checkin);
7        const checkoutday=formatDate(checkout);
8        const error = checkin === '' || checkout === '' || checkin > checkout;
9        SetErrormessage(error);
10        setButtonClicked(!error);
11        fetch(`/search?checkin=${checkinday}&checkout=${checkoutday}`)
12            .then(response => {
13                if (response.ok) {
14                    response.json().then(results => {
15                        setGuesthouseList(results);
16                    });
17                }
18                ;
19            });
20
21    };
22return(
23<TextField className={classes.checkin} label='checkin' type='date' value={checkin}
24                    onChange={checkinChange}
25                    InputProps={{ inputProps: { min: today(), max: '2099/12/31' } }}
26                    InputLabelProps={{ shrink: true, }} />
27<TextField className={classes.checkout} label='checkout' type='date' value={checkout}
28                    onChange={checkOutChange}
29                    InputProps={{ inputProps: { min: today(), max: '2099/12/31' } }}
30                    InputLabelProps={{ shrink: true, }} />
31
32)

試したこと

JSXから送られてきたyyyy-mm-ddの値の変更前の値(checkin)(checkout)の入った
search?checkin=${checkin}&checkout=${checkout}ではAPIをたたけていますが、
JSXから送られてきたyyyy/mm/ddの値(checkinday)(checkoutday)になった場合は
search?checkin=${checkinday}&checkout=${checkoutday}ではAPIをたたけていません、解決策を教えていただきたいです

itagagaki

2021/10/03 14:57

/search これでAPIのURLは合っているんですか？

hoshi-takanori

2021/10/03 18:16

checkinday や checkoutday の値を表示して確認してみては。

退会済みユーザー

2021/10/03 22:56

これで解決するか分からないので、回答ではなくこっちに書きますが、 `/search?checkin=${checkinday}&checkout=${checkoutday}` をそのままfetch に渡すのではなく、encodeしたものを渡すとどうでしょう？つまり const url = encodeURI(`/search?checkin=${checkinday}&checkout=${checkoutday}`); としておいて、 fetch(url).then(response => { ・・・とするとか。それと、 fetch(…).then(…) の後ろに、 .catch((error) => { console.error(error); }); を追加してエラーメッセージを見るのも手が掛かりになります。

sinzinse1gou

2021/10/03 23:53

/searchでAPIのURLはあっており、checkindayとcheckoutdayの値はyyyy/mm/ddになっていました。 encodeしたものを渡したのですが、やはりAPIは叩けませんでした。入力されたcheckin,checkoutの値でsearch?checkin=${checkin}&checkout=${checkout}ではAPIを叩けるのですが、変換処理を加えるとAPIが叩けなくなります。

itagagaki

2021/10/04 02:08

checkinday, checkoutdayの値は、以前に試して成功したcheckin, checkoutの値とまったく同じように見えるのに結果が異なるということですよね。それは奇妙ですね。実は同じではなく何かが違うのでは。何が違うのか見当がつきませんが、まずlengthをコンソールに表示して確認してみては。もちろん値そのものもコンソールに表示してあらためてしっかり確認してみてください。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようにエラーをログ出力するように修正して、どのようなエラーメッセージが出力されるかを確認するとよいかと思います。

diff
1   const error = checkin === '' || checkout === '' || checkin > checkout;
2   SetErrormessage(error);
3   setButtonClicked(!error);
4-  fetch(`/search?checkin=${checkinday}&checkout=${checkoutday}`)
5+  const url = encodeURI(`/search?checkin=${checkinday}&checkout=${checkoutday}`);
6+  fetch(url)
7     .then(response => {
8       if (response.ok) {
9         response.json().then(results => {
10           setGuesthouseList(results);
11         });
12+      } else {
13+        const { status, statusText } = response;
14+        throw new Error(`${status}: ${statusText}`);
15       }
16-      ;
17+    })
18+    .catch(e => {
19+      console.log(e.message);
20     });
21 
22 };
23