React Dropzone的initialFiles读取state为空问题求助

• material-ui-dropzone的initialFiles属于仅初始化生效的非受控属性，组件挂载完成后，后续更新该prop的值不会触发组件内部文件列表的重渲染
• constructor中发起的接口请求是异步操作，第一次执行render函数时接口还未返回，fileLocation还是初始的空数组，组件就已经完成初始化挂载；等接口返回更新state后，initialFiles的变更不会被组件响应，因此无法加载正确的初始文件

方案1：添加key属性强制组件重挂载（改动最小） #

给DropzoneArea组件绑定key属性，值和fileLocation关联，当fileLocation更新后key变化，React会销毁旧组件实例，用最新的initialFiles重新创建组件：

// render方法中
<DropzoneArea
  key={JSON.stringify(this.state.fileLocation)} // 新增该行，key随fileLocation变化
  initialFiles={this.state.fileLocation}
  // 其余原有属性保持不变
/>

方案2：切换为受控模式（推荐） #

不用initialFiles属性，改用组件支持的受控属性files绑定state，搭配onChange事件同步state变更，后续state更新会直接响应到组件：

// render方法中
<DropzoneArea
  files={this.state.fileLocation} // 用files代替initialFiles
  onChange={(newFiles) => this.setState({fileLocation: newFiles})}
  // 其余原有属性保持不变
/>

方案3：延迟渲染组件 #

新增loading状态，接口请求未完成时不渲染Dropzone组件，确保组件初始化时就能拿到正确的初始文件：

// constructor中初始化state
this.state = {
  fileLocation: [],
  isLoading: true // 新增加载状态
}

// 接口请求成功回调中更新状态
getDataBrnachProvider().then(res => {
  this.setState({
    fileLocation: res.data,
    isLoading: false // 关闭加载状态
  })
})

// render方法中判断渲染
{!this.state.isLoading && <DropzoneArea
  initialFiles={this.state.fileLocation}
  // 其余原有属性保持不变
/>}

内容的提问来源于stack exchange，提问作者creator life