最近React.jsを触り始めてちょっとハマったのでメモ。

Ajaxの処理でPromiseを使ってそのコールバック内でthisを使うとthisが想定してるthisじゃなくなりますよという話なのでぶっちゃけReact.jsもPromiseも直接関係はないんですが、自分はその組み合わせで何回も踏んだので・・・調子に乗ってcoffeescriptでthisの代わりに@使ったりしてたので余計気づきにくかったです。

SPONSERD LINK

例えばこんなコード

fetchSomething = ->
  new Promise (resolve, reject) ->
    $.ajax
      url: 'http://something.com'
      dataType: 'json'
    .done (data) =>
      resolve data
    .fail (error) =>
      console.log error
      reject error

_data = null

class SomeStore extends Store

  @name: 'SomeStore'

  @getState: ->
    {data: _data}

  @action 'START', (action) ->
    fetchSomething().then (data) ->
      _data = data
      @emitChange()

これは動かないです。@emitChange()はthis.emitChange()で、ここのthisはもうSomeStoreではなくなっちゃってるからですね。

なのでthisではなくSomeStoreを直接呼ぶ必要があります。

こんな感じ

#
# 略
#

  @action 'START', (action) ->
    fetchSomething().then (data) ->
      _data = data
      SomeStore.emitChange()

まあ気づいちゃえば当たり前なんですが、2日後におんなじことやって5分ぐらい悩んだりしたので残しときました。