【React】URLが[Object%20Object]になった時。〜私の場合の話〜

はじめに

細かい原因などが調査できていないです。
Reactで動的なURLを生成した際に、console上に500エラーが出ていました。

具体的にどのような感じだったかは忘れてしまったのですが、[Object%20Object]という内容を吐いていたことは覚えています。本記事ではその時の対応をパッとまとめてみます。

原因と思われる箇所

条件分岐で、該当しないはずの条件の戻り値が不適切だった。

こんな感じのコードでした。おぼろげに。

const RetinaRatio = 2

const imagePath = () => {
    return (window.devicePixelRatio == RetinaRatio ? require("imageのパス") : {})
}

const url = BASE_URL + imagePath

require("imageのパス")の方が呼び出されているにも関わらず、戻り値の方の{}に反応してエラーが返っていました。

修正方法

{}を""に修正したらエラーが出なくなりました。
確かに戻り値の型が場合によって変わるのは変ですし、{}を返してURLが生成されるとそれはそれで良くないように思います。

これがなぜ起きたのかはまだ調べられていませんが、ふと思い出したのでまとめておきました。