render(){ →return( →~~~.map( → function( → return( → ~~.map( のような階層構造の書き方。

Question

タイトルに困ってしまいました。

コードを用いて簡単にわからないことを説明させてください。

render(){
  return ( 
    <div>
    {
      this.state.sample_out.slice.map(
       function(value){
        return(
          <div>
            {
              this.state.sample_inner.slice.map(
               function(value){
                return(
                  <div></div>
                )
               }
              )
            }
          </div>
        )
       }
    }
    </div>
  )
}

このように記述したいときに、内部のthis.stateがundefinedとなってしまうと思うのですが、
縦方向のリストに、横方向のリストを入れ込む、といった構造を考えた時に、こう考えた方が僕にはわかりやすかったのですが、
このような記述は可能なのでしょうか？

Answer 1

本来なら内部でもstateは参照出来るはずです

this.state.sample は配列でしょうか？

おそらく

this.state.sample.slice.map

この時点でundefinedになっているので、sampleが配列だとしたら

this.state.sample.map

が正しいと思われます

Comments

[MOTOMUR]

回答ありがとうございます。
変えてやって見ましたが、エラーは変わりませんでした。

sampleの中身は現在は
[{day:'月'},{day:'火'},{day:'水'},{day:'木'},{day:'金'}]
こんな感じにしています。（連想配列であってますかね？）。function(value)の引数でvalue.dayとしたいのでこの状態です。

上の階層の配列は連想配列（？）で、
[
{Start:'initial',End:'initial',koma:0},
{Start:'08:45',End:'10:15',koma:1},
{Start:'10:30',End:'12:00',koma:2},
{Start:'13:00',End:'14:30',koma:3},
{Start:'14:45',End:'16:15',koma:4},
{Start:'16:30',End:'18:00',koma:5}
]
これはうまくいっています。

ちなみにあまり関係のないことだと思いますが、補足です。
内部のfunction と returnの間にif文を挟んでいます。（returnはifで条件分岐したものです。）

[DotEarl]

上の階層と下の階層が両方 `this.state.sample` なのですが、実際は別々の名前ですよね？
どちらにしろ `sample` の部分が配列なら `.slice` の部分は不要のはずです

[MOTOMUR]

質問文のsampleかぶっていましたね。すいません。
sample_out sample_innerと直しておきます。
this.state.sample_inner.map()
と言うことですよね？

試して見ましたがundefinedとなってしまいます。

[DotEarl]

一度、両方 Arrow Functionにしてみて下さい

`
this.state.sample_out.slice.map(value => {
// ...
})
`

[MOTOMUR]

ありがとうございます！治りました。

thisの束縛の問題だったようですね。
arrowにしたら治りました。
functionを使うメリットを感じなくなってしまいますね。