no-image

APIからデータを取得し、改行を加えてRedux、Reactで表示する

mobile backendのデータストアからデータを取得し、
それに改行を加えてReact,Reduxを使ったmonacaアプリ内で表示する時に少し躓いたのでその時のメモ。

 

問題点

今回利用したデータはこんな感じ。
改行と空行が含まれている。

 

mobile backendの公式ドキュメントの手順に従い、データストアからデータを取得し、それをReduxに投げる。

 

投げたデータを実際にviewに表示してみる。

 

すると以下のように改行されずに表示される。

 

試してみたこと

調べてみると以下のような記事が出てきた。
問題はReactのbrタグなようだ。

【参考】
React.jsで改行が表示されなくて困ったメモ – DRYな備忘録
React.jsで改行を\<br\>に変換する – Qiita

 

string型のオブジェクトを何らかのキーワードで区切って、改行して表示していく。

しかし、試してみると一度Reduxの中に入ってから出てきたオブジェクトはstring型であるにも関わらずsplitオブジェクトを持っていないらしく
「Uncaught TypeError: Cannot read property ‘split’ of undefined.」
というエラーが表示された。

 

解決策

ただ、Reduxに入れる前の、つまりデータを取得してきたタイミングではsplitオブジェクトを持っているようなので、以下の様にした。

まずReducerでcontentの初期値を[]にする。つまり配列型にする。

次に、データを取得したタイミングでsplitする。

 

そして同じようにReduxに入れて、戻ってきた時にもう一手間加える。
Reduxから返却される配列を要素ごとにdivタグで括る。
pタグでも良いが、行間が気になるのでdivタグにした。

ただ、これだけだと空行が無視されて表示されるので、空行の場合はreactの空行エレメントを追加する。

 

これによって上手く表示された。

なんとか力技で解決したが、なぜreduxから戻ってきたデータはstring型にもかかわらずsplitを持っていないっぽいのか。
この問題に関しては解決していない。ところどころjsに対する理解の浅さが目につくので、もっと勉強しないといけない。