antd Upload上传报Uncaught TypeError: items.map is not a function错误

在写项目的时候，使用到了antd里面的Upload来上传文件，写好之后运行报错。。。

代码是这样的：

const uploadProps = {
    action: createTheURL('software/stu/score', 'upload'),
    method: 'POST',
    headers: { 
        authorization: tokenHandler.getSessionByKey('authorization') 
    },
    onRemove: this.handleRemove
}
<Form.Item
    label='附件'
>{getFieldDecorator('appendix', {
    initialValue: JSON.parse(appendix) || [],
    valuePropName: 'fileList',
})(<Upload {...uploadProps} >
        <a style={{ marginRight: 20 }}>
            <Icon type="plus" />添加附件
        </a>
        <span>(最多上传10个文件，单个文件不能超过20M)</span>
    </Upload>)}
</Form.Item>

造成这个问题的原因是，因为在上传了一个文件之后，会有产生一个新的fileList，但是这个新的fileList没有回传到Upload组件的fileList里面，所以只要我们把新的fileList给到Upload，那么这个问题就可以解决了。

最开始我的做法是，将fileList存到state里面，然后每次上传文件就会触发Upload的onChange函数，在onChange函数里面将新的fileList又通过使用setState将其存到state里面，最后在将state里面的fileList放到Upload里面。

代码大概就是这个样子：

handleChange = info => {
    const { fileList } = info;
    this.setSate({
        fileList
    });
}

render(){
    const { fileList } = this.state;
    const uploadProps = {
        action: createTheURL('software/stu/score', 'upload'),
        method: 'POST',
        headers: { 
            authorization: tokenHandler.getSessionByKey('authorization') 
        },
        fileList,
        onRemove: this.handleRemove,
        onChange: this.handleChange
    };
    
    return (
        <Form.Item
            label='附件'
        >
            <Upload {...uploadProps} >
                <a style={{ marginRight: 20 }}>
                    <Icon type="plus" />添加附件
                </a>
                <span>(最多上传10个文件，单个文件不能超过20M)</span>
            </Upload>
       </Form.Item>
    )
}

但是这样写，在后面还是会有一些问题，这里只用来处理新增表单数据没问题；但是如果是要对上传之后的表单数据进行一个修改的话就会出现问题，因为在修改的时候，需要先获取已经提交了的数据，对于已经上传了的文件需要先获取到文件名，生成fileList存到state里面，然后再放到Upload组件里面，如果这样写的话，最后就会发现整个流程就很混乱，而且也不一定完全没问题。

最终解决办法：

直接使用antd Form组件里面的getValueFromEvent方法，这个方法的作用就是把onChange的参数(Upload里面，这里的参数就是file和fileList)。

antd Form组件

我写的代码如下：

const uploadProps = {
    action: createTheURL('software/stu/score', 'upload'),
    method: 'POST',
    headers: { 
        authorization: tokenHandler.getSessionByKey('authorization') 
    },
    onRemove: this.handleRemove
}

<Form.Item
    label='附件'
>{getFieldDecorator('appendix', {
    initialValue: JSON.parse(appendix) || [],
    valuePropName: 'fileList', 
    getValueFromEvent: e => {
        if (Array.isArray(e)) {
            return e;
        }
    return e && e.fileList;
    }
})(<Upload {...uploadProps} >
       <a style={{ marginRight: 20 }}>
           <Icon type="plus" />添加附件
       </a>
       <span>(最多上传10个文件，单个文件不能超过20M)</span>
    </Upload>)}
</Form.Item>