【react】render内で’===’を使うとなぜか文字列に変換される

reactのrender内では三項演算子がうまく働かない時があるんですが原因はなんなのでしょうか。

例えば

</pre>
const number = 1;

const shelter = number === 1 ? 'number' : 'ather';
<pre>

三項演算子はこのように定義するのですが、ここでは通常ならばnumber変数の中身は1なので変数shelterには’number’が入ります。

ですが、これをrender()内で実行すると、なぜかatherさんが格納されてしまうという事態に!

render()はstateが呼ばれるたびに更新するので、その時に変数も更新されてundefinedになっているのではと思ったのですがどちらの変数に

もしっかりと1が入っている(どういうこと!?)しかも文字列ではなくて普通に数値なんですがそれは・・・。

だとしたらもう怪しいのはお前しかいない、===!とりあえず特定をしたくてこれと==を比較して使ってみたのですが

見事にそれぞれ文字列と数値を吐き出していました。

てな訳で原因が分かったところで結局=を一つ減らして再render()して力ずくで解決させてしまいました。

そもそも数値で定義しているのになぜ文字列に解釈されているのかが分からないのですが。reactには勝手に値を変換するプラグインとかも

入れていないしjavascriptに型推論なんて存在しないしデフォルトの状態でこれならもう’===’を使うのを躊躇してしまいますw

ここは素直に’==’を使いましょうということでしょうか・・・

とりあえずrender()内で値を扱う時は値の型に気を配ってコーディングしなさいという戒めだと思って肝に銘じておきます。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG