简体   繁体   English

类型函数的无状态功能组件支持不会更新

[英]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 我正在使用React 15.4.2,Mobx 3.0.0

I have a stateless functional Blah component which accepts an object thing as a prop. 我有一个无状态的功能Blah它接受一个对象成分thing作为一个支柱。
thing has properties which are observable. thing具有可观察的属性。
As expected, when a different instance of thing is passed in, the Blah component updates accordingly. 不出所料,当传入其他thing实例时,Blah组件将相应地更新。
The Blah Component has another component that is basically a wrapper for react-dropzone-component called DzComponent Blah组件有另一个组件,该组件基本上是称为DzComponent react-dropzone-component的包装器
One of the parameters passed to react-dropzone-component is the success event handler. 传递给react-dropzone-component的参数之一是success事件处理程序。 This is called when we drop something and it successfully uploads. 当我们放下东西并成功上传时,这称为。

The issue is this sequence of events: 问题是事件的顺序是这样的:

  • Blah called with thing instance A Blah用东西实例A叫来
  • DzComponent correctly gets handleImageUpload reference. DzComponent正确获取handleImageUpload参考。 ie upon success, when we call props.thing.observable it is referring to instance A 即成功后,当我们调用props.thing.observable它是指实例A
  • Blah called with thing instance B Blah用东西实例B叫来
  • DzComponent seems to still refer to old handleImageUpload reference. DzComponent似乎仍然引用旧的handleImageUpload参考。 ie upon success, props.thing.observable is still referring to instance A instead of the intended instance B 即成功后, props.thing.observable仍然引用实例A而不是预期的实例B

How do I get the event handler to update the correct instance? 如何获取事件处理程序以更新正确的实例?

Blah.jsx 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 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 我刚刚检查了http://jsbin.com/bulubuwuzo/1/edit?js,控制台,输出

Everything works ok 一切正常

Maybe you have a bug on DzComponent or DropzoneComponent component 也许您在DzComponentDropzoneComponent组件上有错误

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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