Observable不会改变render（）

Question

我正在使用与mobx的rfx堆栈并创建了一个可观察的profilePhoto对象，将其初始化为null。 OnDrop事件（图像放下/上传）我更改了此对象值，但在render（）函数中，图像不会显示。

@inject('store') @observer @authorize
class Settings extends Component {
static fetchData() {}

@observable profilePhoto = {};

static propTypes = {
  store: PropTypes.object,
  t: PropTypes.func,
};

componentWillMount() {
  const { t } = this.props;
  dispatch('ui.appBar.setTitle', t('title.profile'));
  dispatch('ui.appBar.setSubPage', true);
}

onDrop(acceptedFiles, rejectedFiles) {
  this.profilePhoto = acceptedFiles;
  console.log(this.profilePhoto.preview);
}

render() {
  const { ui } = this.props.store;

  return (
    <div className="main">
      <Dropzone
        onDrop={this.onDrop.bind(this)}
        className='dropzone'
        activeClassName='active-dropzone'
        multiple={false}>
        <div>Drag and drop or click to select a 550x550px file to upload.</div>
      </Dropzone>
      <div>{this.profilePhoto !== undefined ? this.profilePhoto.map((file) => <img src={file.preview} /> ) : null}</div>   
    </div>
    );
  }
}
export default translate('settings')(Settings);