相信你一定遇到过这种坑

使用了Upload上传组件，就是不请求api，或者是请求了api但是上传列表中就是不显示 没错，最近就是遇到了这种问题，在上传图片这里遇到了很坑很坑的问题

需求其实很简单，实际操作很让人头疼，尤其是拿着上一个人的代码，改他之前写的bug，在他之前写的代码基础上来增加新功能，不加还好，加了以后，连带着新功能全部崩溃，之前写的东西，全部不能再要了，我也是服了，几千行代码交给我来审阅，你能知道我心中的的这份苦楚吗，好难过，好悲伤。

话不多说，直接贴代码上图

Upload组件的上传文件列表fileList和defaultFileList

• 从文档中可以看出两个参数的区别

第一点就是组件的受控类型,fileList是受控组件，而defaultFileList是非受控组件

就形式意义上来说，非受控组件在底层实现时是在其内部维护了自己的状态state；这样表现出用户输入任何值都能反应到元素上；非受控组件在底层实现时是在其内部维护了自己的状态state；这样表现出用户输入任何值都能反应到元素上。

• 受控元素，一般用在需要动态设置其初始值的情况；例如某些form表单信息编辑时，input表单元素需要初始显示服务器返回的某个值然后进行编辑。
• 非受控元素， 一般用于无任何动态初始值信息的情况； 例如form表单创建信息时，input表单元素都没有初始值，需要用户输入的情况

在我们平常使用的时候，肯定是会用到受控组件，方便我们用于set和管理，控制拿到的数据；非受控组件可以拿到数据的最新列表，无需我们重新set，很多时候，可能在set更新这个列表的时候，与上传的时候请求的upload api会发生冲突，直接上图贴报错

在我们上传文件或者上传图片的时候，会发生这么个报错，意思大概就是在onChange事件的时候，对上传列表进行了set更新，然后出现了上传api和set的冲突，这个时候使用fileList受控组件就受到了限制；

这个时候我们可以使用defaultFileList非受控组件来显示在视图上，反正上传的列表也是来给用户看到的效果，对于用户来说，他进行了上传图片文件的操作，无非就是为了看到显示的效果，更好的用户体验，这个时候不用去纠结受控组件还是非受控组件；

话不多说，直接上Upload组件的代码

我在这里只是为了给大家一个简单的示例效果，如果大家还有更好的解决set和fileList受控组件的方法，欢迎留言， 作为官方啊文档，更为推荐的肯定是fileList受控组件，但是如果遇到受控组件报错的问题，还是可以选择使用defaultFileList非受控组件来解决相关的问题的

极速更新中....欢迎留言