Closed kuniyuki-f closed 1 year ago
vercel[bot]
commented
1 year ago The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| timelogger-web | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Oct 24, 2023 2:44am |
keitakn
commented
1 year ago @kuniyuki-f
CORSエラー内容
これに関してですが、API Routeに対するアクセスで起きていますね、これはVercel上の環境変数（Preview） NEXT_PUBLIC_APP_URL が https://timelogger-web-git-feature-issue11add-docs-commew.vercel.app となっているからですね！
API Routeにアクセスする際に /api/tasks/create のようにパスのみでアクセスすればおそらく問題なくなると思います👍
とは言えそれも改修範囲が大きいと思いますし、このPRを直すだけなら NEXT_PUBLIC_APP_URL を書き換えて再デプロイをするのが最も早そうですね！
kuniyuki-f
commented
1 year ago お二人ともレビューありがとうございました！ LGTMいただいたので、一旦マージしてしまいます。
API Routeにアクセスする際に /api/tasks/create のようにパスのみでアクセスすればおそらく問題なくなると思います👍 とは言えそれも改修範囲が大きいと思いますし、このPRを直すだけなら NEXT_PUBLIC_APP_URL を書き換えて再デプロイをするのが最も早そうですね！
NEXT_PUBLIC_APP_URLを https://timelogger-web-git-feature-issue141-commew.vercel.app に書き換えて再デプロイしたらCORSエラーなくなりました！
またAPI Route へのアクセスパスに関してはIssueを立てておきました。 （1stリリース時の対応は必須ではないと思うので、優先度は低の認識です）
issueURL
141
この PR で対応する範囲 / この PR で対応しない範囲
Storybook の URL、 スクリーンショット
変更点概要
TaskItemコンポーネントのkeyにindexではなくtaskIdを使用するように修正useTaskの中でsetXXXのような状態を更新する関数の引数にタスクの配列を直接セットするのではなく、更新関数を適用レビュアーに重点的にチェックして欲しい点
下記URLでログインできるようにしたのですが、Next.js内のクライアント→バックエンドのAPIリクエストでCORSエラーが出てしまうので、一旦スクリーンショットのGIFとコードをご覧いただいて、レビューをお願いします🙇 https://timelogger-web-git-feature-issue143-commew.vercel.app
補足情報
useStateの仕様） 以下の公式ドキュメントに記載がありました。今回のバグの原因は、非同期通信の処理が完了する前に状態を更新してしまっていたという事象が関連している可能性が非常に高いです。useStateで定義する
setXXXの引数に更新関数としてコールバック関数を与えると、必ず最新の状態を参照して状態を更新できるみたいです。知らなかった・・・ https://ja.react.dev/reference/react/useState#updating-state-based-on-the-previous-state（
TaskItemのkeyにindexを使っていたのも悪手でしたね...。主にこの２点がご報告いただいたバグの原因でした。）