react dropzone子图标在状态更改时未更改

import Dropzone from 'react-dropzone';

const status = {
  ready: 'ready',
  preview: 'preview',
  error: 'error',
  requested: 'requested',
  success: 'success',
  failed: 'failed',
};

状态可以根据用户操作进行更改(因此,当他们将文件拖到dropzone上时,我会按以下方式更新状态:

onDrop(acceptedFiles, rejectedFiles) {
  // do some stuff here...
  this.setState({ status: status.preview });

}

我的渲染方法有三个步骤: 1实际渲染方法

render() {
const config = {
  iconFiletypes: ['.xlsx'],
  showFiletypeIcon: true,
};

return (
  <div style={{ marginBottom: '30px' }}>
    <Dropzone
      config={config}
      onDrop={files => this.onDrop(files)}
      //className="dropzone"
      multiple={false}
    >
      {this.renderDropZoneContent()}
    </Dropzone>
  </div>
);

根据状态选择要渲染的内容:

renderDropZoneContent() {
  switch (this.state.status) {
    case status.ready:
      return this.renderReadyState();
    case status.preview:
      return this.renderPreviewState();
    // and on down for each state / status + default case...
  }
}

最后是将每个案例呈现为函数的代码:

renderPreviewState() {
  return (
    <div style={{ marginTop: '35px', textAlign: 'center' }}>
    <i className="far fa-file-excel" style={{ verticalAlign: 'middle', fontSize: '50px' }} />
    {/* There is more jsx here but I removed it for clarity */}
  </div>
  );
}

renderReadyState() {
  return (
    <div style={{ marginTop:'35px', textAlign:'center'}>
      <i className="fas fa-cloud-upload-alt" style={{ verticalAlign: 'middle', fontSize: '50px' }} />
  </div>
);

}

没什么太疯狂的。我的问题是,随着状态的改变,文本会更新,但图标不会。这是一个有趣的问题,因为应用程序的逻辑可以工作,但它是特定的元素,不会得到更新。更有趣的是,我尝试将整个返回包装到另一个div中,并得到错误:Uncaught DOMException:未能在“Node”上执行“removeChild”:要删除的节点不是该节点的子节点。我的头撞在墙上。如果有人遇到过这个问题,并有任何提示,这是非常感谢!!