Object.keys(that).forEachの描画で起こった問題点

Question

連想配列の描画の管理についてつまずいたので、質問させてください。

普段、配列をrender内で扱う時、this.state.object.map(()=>{return()})
のように扱うのですが、連想配列がこれでは許されません。

Object.key(this.state.object).forEach((key)=>{return()})

として、return内で

this.state.object[key]

として描画可能ということを調べて記述しました。

現在描画段階でつまずいており、function内でのconsole.log()で、forEachは成功していることが判明。

renderの再描画の判定はこれだと間に合わないのでしょうか？
（object.keyを挟まない時はうまく行くのでこのように考えました。）

それとも別の要因でしょうか？

うまくいかないコードです。

{
  Object.keys(this.state.subjects).forEach(
    key => {
      return(
        <ListItem>
         <Text>a {this.state.subjects[key].subject}</Text>
        </ListItem>
      )
    }
  )
}

key内のstateの表示はできていたのに、内部に作成できないのは何が原因でしょうか？

Answer 1

const forEachResult = [1,2,3].forEach(v => v)
console.log(forEachResult) //undefined

const mapResult = [1,2,3].map(v => v)
console.log(mapResult) // [1, 2, 3]

Array.prototype.forEach
Array.prototype.forEachの戻り値はundefinedですよ。

それに対して、Array.prototype.mapの戻り値は配列です。

Comments

[MOTOMUR]

詳しい説明ありがとうございます。なるほど、そのような違いがあったのですね。

Answer 2

forEachとmapに関してざっと解説します。
まず、このforEachやmapのようなコールバック関数を一つ引数として受け取り、
配列の中身を1個ずつ抜き出してコールバック関数で適用していくのを指して、「リスト操作」と呼びます。

• forEach: 処理を行い、戻り値は不要なので捨てる(例えばconsole.logで表示するだけとか、Ajax通信を発射するだけとかに使う)
• map: コールバック関数を適用した結果の戻り値を利用して、新しい配列を作り直す

やってる事自体はmapはforEachの上位互換と呼べるかも知れません。
ですが、mapは地図の他に、工場のライン生産で大量の商品を一気にプレス加工で作り出すという意味があります。

処理に特化したforEach、これはmapとの違いは戻り値を捨てるだけの違いしかありませんが、
コードリーディング時に「これは処理だから戻り値を捨てるんだ」という宣言にもなりますので確実に使い分けて下さい。

Comments

[MOTOMUR]

ありがとうございます。今後気を付けてコーディングをしようと思います。

Answer 3

Array.forEachではなくArray.mapを利用してはどうでしょうか？

Comments

[MOTOMUR]

mapだと表示されました。。。
なぜforEachだとうまくいかなかったのでしょうか？