[英]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 也许您在
DzComponent
或DropzoneComponent
组件上有错误
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.