简体   繁体   中英

Stateless Functional Component prop of type function doesn't update

I don't know how to accurately describe the issue i'm facing so the title probably makes little sense.

I am using react 15.4.2, mobx 3.0.0

I have a stateless functional Blah component which accepts an object thing as a prop.
thing has properties which are observable.
As expected, when a different instance of thing is passed in, the Blah component updates accordingly.
The Blah Component has another component that is basically a wrapper for react-dropzone-component called DzComponent
One of the parameters passed to react-dropzone-component is the success event handler. This is called when we drop something and it successfully uploads.

The issue is this sequence of events:

  • Blah called with thing instance A
  • DzComponent correctly gets handleImageUpload reference. ie upon success, when we call props.thing.observable it is referring to instance A
  • Blah called with thing instance B
  • DzComponent seems to still refer to old handleImageUpload reference. ie upon success, props.thing.observable is still referring to instance A instead of the intended instance B

How do I get the event handler to update the correct instance?

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);

I've just checked http://jsbin.com/bulubuwuzo/1/edit?js,console,output

Everything works ok

Maybe you have a bug on DzComponent or DropzoneComponent component

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM