2017-01-11 19 views
0

私は直面している問題を正確に記述する方法を知らないので、タイトルがおそらくほとんど意味をなさないでしょう。タイプ機能のステートレス機能コンポーネントの小道具は更新されません

私は15.4.2を使用している反応は、私が小道具としてオブジェクトthingを受け付けるステートレス機能Blah成分を有する3.0.0

をmobx。
thingは、観察可能な特性を有する。
期待通り、thingの別のインスタンスが渡されると、それに応じてBlahコンポーネントが更新されます。 DzComponent
呼ば
Blahコンポーネントは、基本的のラッパーである別の成分が反応し、ドロップゾーン成分を有する反応-ドロップゾーン・コンポーネントに渡されたパラメータの1つはsuccessイベントハンドラです。これは、何かを落として正常にアップロードするときに呼び出されます。

問題は、このイベントのシーケンスです:

  • 事インスタンスと呼ばれるBlahA
  • DzComponentは正しくhandleImageUpload参照を取得します。すなわち成功時、我々はそれがインスタンスにA
  • 事インスタンスと呼ばれるBlahB
  • DzComponentを参照しているprops.thing.observableを呼び出すときには、まだ古いhandleImageUploadリファレンスを参照してくださいようです。すなわち成功時、props.thing.observableはまだB
  • インスタンス Aを参照の代わりに、意図したインスタンスれ

にはどうすれば正しいインスタンスを更新するために、イベントハンドラを得るのですか?

Blah.jsx

import React from 'react'; 
import {observer} from 'mobx-react'; 

function Blah(props) { 

    function handleImageUpload(evt, res) {  
     props.thing.observable = res.image_url 
    } 

    return (
     <div> 
      <div>blah blah blah {props.thing.otherObservable}</div> 
      <DzComponent success={handleImageUpload}></DzComponent> 
     </div> 
    ) 
}  
Blah.propTypes={ 
    thing: React.PropTypes.object 
} 

export default observer(Blah) 

DzComponent.jsz

import React from 'react'; 
import DropzoneComponent from 'react-dropzone-component'; 
function DzComponent(props) { 
    return <DropzoneComponent></DropzoneComponent> 
} 

export default observer(DzComponent); 

答えて

1

私はちょうどhttp://jsbin.com/bulubuwuzo/1/edit?js,console,output

すべてはたぶん、あなたはDzComponentまたはDropzoneComponent上のバグを持って

うまく動作チェックしましたコンポーネント

+0

hmmm。一緒に入れてくれてありがとう。それはうまくいくはずです。コードを再見直します。 –

関連する問題