浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【javascrpt】reactにおける三項演算子とstateの間違った使い方

三項演算子を使うあたり凡ミスをしたのでメモ。。。
下のような三項演算子を使った式についてですが、これが問題の書き方。
</pre>
<div>render(){</div>
<div>  this.state.material_data.code != null ? jan_code.push(<tr><th>JANコード</th><td>{this.state.material_data.code}</td></tr>) : "";</div>
<div>    return (</div>
<div>        //anything</div>
<div>    );</div>
<div>}</div>
<pre>
renderの時点ではthis.state.material_data.codeは入っておらず、実際に
ビルドしてみても上の状態ではただrender上で式だけ書いた状態なので、
Expected an assignment or function call and instead saw an expressionのエラーが
でてしまいビルドができなくなります。
この式を変数に追加することで表示だけはすることができますが、やはりこの段階では
this.state.material_data.codeは入っておらず不適切な値が入ってしまい正しく表示できない。
</pre>
<div>
<div>render(){</div>
<div>    const i = this.state.material_data.code != null ? jan_code.push(<tr><th>JANコード</th><td>{this.state.material_data.code}</td></tr>) : "";</div>
<div>      return (</div>
<div>          {i}</div>
<div>      );</div>
<div>  }</div>
<div></div>
<pre>
正しくは下のような感じ。

render(){
  return (
    {this.state.material_data.code !== null ? <tr><th>JANコード</th><td>{this.state.material_data.code}</td></tr> : “”}
  );
  }

return内で{}で囲みその中で三項演算子を含んだ式を書くことで正しく表示させることができます。
stateの値の有効範囲と三項演算子の兼ね合いもあって間違えやすいので注意です。
  • この記事いいね! (0)