Question

我不知道如何准确描述我所面临的问题，所以标题可能毫无意义。

我正在使用react 15.4.2，mobx 3.0.0

我有一个无状态功能Blah组件，它接受一个对象thing作为道具 thing具有可观察的属性正如所料，当传入thing的不同实例时，Blah组件会相应更新 Blah组件有另一个组件，它基本上是名为DzComponent的 react-dropzone-component 的包装器。传递给react-dropzone-component的参数之一是success事件处理程序。当我们删除某些内容并成功上传时，会调用此方法。

问题在于这一系列事件：

Blah

A
DzComponent正确获得handleImageUpload引用。即成功时，当我们致电props.thing.observable时，它指的是实例A

Blah

B
DzComponent似乎仍然引用旧handleImageUpload引用。即成功后，props.thing.observable仍然引用实例A而不是预期的实例B

如何让事件处理程序更新正确的实例？

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

Answer 1

我刚检查过http://jsbin.com/bulubuwuzo/1/edit?js,console,output

一切正常

也许您在DzComponent或DropzoneComponent组件

上有错误

类型函数的无状态函数组件prop不会更新

1 个答案: